v2 Step 4: Fetch API data while keeping secrets secure

Author: seejamescode

.gitignore

@@ -19,3 +19,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+now-secrets.json

now-staging.json

@@ -2,7 +2,8 @@
   "alias": ["create-react-app-devops-staging"],
   "files": ["public", "src", "config-overrides.js", "now.json", "yarn.lock"],
   "env": {
-    "NODE_ENV": "production"
+    "NODE_ENV": "production",
+    "githubAccessToken": "@github"
   },
   "scale": {
     "sfo1": {

now.json

@@ -2,7 +2,8 @@
   "alias": ["create-react-app-devops"],
   "files": ["public", "src", "config-overrides.js", "now.json", "yarn.lock"],
   "env": {
-    "NODE_ENV": "production"
+    "NODE_ENV": "production",
+    "githubAccessToken": "@github"
   },
   "scale": {
     "sfo1": {

package.json

@@ -8,10 +8,12 @@
     "babel-preset-env": "^1.7.0",
     "compression": "^1.7.2",
     "express": "^4.16.3",
+    "now-env": "^3.1.0",
     "react": "^16.4.1",
     "react-app-rewired": "^1.5.2",
     "react-dom": "^16.4.1",
-    "react-scripts": "1.1.4"
+    "react-scripts": "1.1.4",
+    "request": "^2.87.0"
   },
   "scripts": {
     "start": "yarn dev",

src/App.js

@@ -1,8 +1,25 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { Component } from "react";
+import logo from "./logo.svg";
+import "./App.css";
 
 class App extends Component {
+  state = {
+    repos: []
+  };
+
+  componentDidMount() {
+    fetch(`/api/v1/github`, {
+      credentials: "same-origin"
+    })
+      .then(response => response.json())
+      .then(data => {
+        if (data.length > 0) {
+          const repos = data.map(repo => <p key={repo.id}>{repo.name}</p>);
+          this.setState({ repos });
+        }
+      });
+  }
+
   render() {
     return (
       <div className="App">
@@ -13,6 +30,8 @@ class App extends Component {
         <p className="App-intro">
           To get started, edit <code>src/App.js</code> and save to reload.
         </p>
+        <h3>App Creator's Repos:</h3>
+        {this.state.repos}
       </div>
     );
   }

src/App.test.js

@@ -1,9 +1,15 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
 
-it('renders without crashing', () => {
-  const div = document.createElement('div');
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    json: () => Promise.resolve([])
+  })
+);
+
+it("renders without crashing", () => {
+  const div = document.createElement("div");
   ReactDOM.render(<App />, div);
   ReactDOM.unmountComponentAtNode(div);
 });

src/server/index.js

@@ -1,5 +1,10 @@
 import compression from "compression";
 import express from "express";
+import request from "request";
+
+if (process.env.DEV === "true") {
+  const nowEnv = require("now-env");
+}
 
 const app = express();
 const port = process.env.PORT || 8080;
@@ -14,6 +19,24 @@ app.use((req, res, next) => {
   }
 });
 
+app.get("/api/v1/github", (req, res) => {
+  request(
+    {
+      url: `https://api.github.com/user/repos?affiliation=owner,collaborator&access_token=${
+        process.env.githubAccessToken
+      }`,
+      headers: {
+        "user-agent": "node.js"
+      }
+    },
+    (err, response, body) => {
+      if (!err && response.statusCode === 200) {
+        res.send(body);
+      }
+    }
+  );
+});
+
 app.use(express.static("./build"));
 
 app.listen(port, err => {

yarn.lock

@@ -4784,6 +4784,10 @@ normalize-url@^1.4.0:
     query-string "^4.1.0"
     sort-keys "^1.0.0"
 
+now-env@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/now-env/-/now-env-3.1.0.tgz#e0198b67279d387229cfd4b25de4c2fc7156943f"
+
 npm-bundled@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.3.tgz#7e71703d973af3370a9591bafe3a63aca0be2308"
@@ -5954,7 +5958,7 @@ repeating@^2.0.0:
   dependencies:
     is-finite "^1.0.0"
 
-request@^2.79.0:
+request@^2.79.0, request@^2.87.0:
   version "2.87.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.87.0.tgz#32f00235cd08d482b4d0d68db93a829c0ed5756e"
   dependencies: