feature: set up swapi for netlify build

dependabot[bot] · acao · commit aebd69379ef6 · 2019-11-27T16:36:45.000-05:00
- update dependencies only as needed
- add handler using aws-express-serverless (not ideal but it works!)
- move code around to share with a local, normal express server
- add build step for netlify-lambda script
- add netlify deploy previews
- upgrade GraphiQL version
diff --git a/.babelrc b/.babelrc
@@ -1,10 +1,10 @@
 {
   "presets": [
-    "env"
-  ],
+    ["env", { "targets": { "node": "current" }}]
+  ], 
   "plugins": [
-    "transform-flow-strip-types",
-    "transform-object-rest-spread",
-    "transform-runtime",
+    "transform-flow-strip-types", 
+    "syntax-async-functions",
+    "babel-plugin-syntax-object-rest-spread"
   ]
 }
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1 @@
+node_modules
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,7 @@
 /lib
+/netlify-lambda-lib
 /public/schema.js
-/node_modules
-/npm-debug.log
+node_modules
+npm-debug.log
 /coverage
 /cache/data.json
diff --git a/README.md b/README.md
@@ -6,8 +6,9 @@ A wrapper around [SWAPI](http://swapi.co) built using GraphQL converting it into
 Uses:
 
 * [graphql-js](https://github.com/graphql/graphql-js) - a JavaScript GraphQL runtime.
-* [DataLoader](https://github.com/facebook/dataloader) - for coalescing and caching fetches.
+* [DataLoader](https://github.com/graphql/dataloader) - for coalescing and caching fetches.
 * [express-graphql](https://github.com/graphql/express-graphql) - to provide HTTP access to GraphQL.
+* [aws-serverless-express](https://github.com/awslabs/aws-serverless-express) - to use `express-graphql` on aws lambda.
 * [GraphiQL](https://github.com/graphql/graphiql) - for easy exploration of this GraphQL server.
 
 Try it out at: http://graphql.org/swapi-graphql
@@ -20,24 +21,24 @@ Try it out at: http://graphql.org/swapi-graphql
 Install dependencies with
 
 ```sh
-npm install
+yarn
 ```
 
 ## SWAPI Wrapper
 
 The SWAPI wrapper is in `./swapi`. It can be tested with:
 
 ```sh
-npm test
+yarn test
 ```
 
 ## Local Server
 
 A local express server is in `./server`. It can be run with:
 
 ```sh
-npm run build # Only if you changed something
-npm start
+yarn build # Only if you changed something
+yarn start
 ```
 
 A GraphiQL instance will be opened at http://localhost:8080/ (or similar; the actual port number will be printed to the console) to explore the API.
diff --git a/handler/index.js b/handler/index.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE-examples file in the root directory of this source tree.
+ *
+ */
+
+const awsServerlessExpress = require('aws-serverless-express');
+
+const app = require('../lib/service');
+
+// NOTE: If you get ERR_CONTENT_DECODING_FAILED in your browser, this is likely
+// due to a compressed response (e.g. gzip) which has not been handled correctly
+// by aws-serverless-express and/or API Gateway. Add the necessary MIME types to
+// binaryMimeTypes below, then redeploy (`npm run package-deploy`)
+const binaryMimeTypes = [
+  'application/javascript',
+  'application/json',
+  'font/eot',
+  'font/opentype',
+  'font/otf',
+  'image/jpeg',
+  'image/png',
+  'image/svg+xml',
+  'text/css',
+  'text/html',
+  'text/javascript',
+];
+
+const server = awsServerlessExpress.createServer(app, null, binaryMimeTypes);
+
+exports.handler = (event, context) =>
+  awsServerlessExpress.proxy(server, event, context);
diff --git a/netlify.toml b/netlify.toml
@@ -0,0 +1,2 @@
+[build]
+  functions = "netlify-lambda-lib"
diff --git a/package.json b/package.json
@@ -20,12 +20,6 @@
   "options": {
     "mocha": "--require babel-register --require scripts/mocha-bootload src/**/__tests__/*.js"
   },
-  "babel": {
-    "optional": [
-      "runtime",
-      "es7.asyncFunctions"
-    ]
-  },
   "browserify": {
     "transform": [
       "babelify"
@@ -35,57 +29,56 @@
     "react": "global:React"
   },
   "scripts": {
-    "postinstall": "npm run download && npm run build",
-    "test": "npm run lint && npm run check && npm run testonly",
-    "start": "node lib/server/main.js",
+    "postinstall": "yarn run download && yarn run build",
+    "test": "yarn run lint && yarn run check && yarn run testonly",
+    "start": "node lib/server",
     "watch": "babel scripts/watch.js | node",
-    "testonly": "mocha $npm_package_options_mocha",
-    "lint": "eslint src",
-    "lintfix": "eslint --fix src",
+    "testonly": "mocha $yarn_package_options_mocha",
+    "lint": "eslint src handler",
+    "lintfix": "eslint --fix src handler",
     "check": "flow check",
     "cover": "babel-node node_modules/.bin/isparta cover --root src --report html node_modules/.bin/_mocha -- $npm_package_options_mocha",
-    "coveralls": "babel-node node_modules/.bin/isparta cover --root src --report lcovonly node_modules/.bin/_mocha -- $npm_package_options_mocha && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
-    "build": "babel src --optional runtime --ignore __tests__,public --out-dir lib/",
+    "coveralls": "babel-node node_modules/.bin/isparta cover --root src --report lcovonly node_modules/.bin/_mocha -- $yarn_package_options_mocha && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
+    "build": "rimraf lib && babel src --ignore __tests__,public --out-dir lib/ && yarn build-lambda",
+    "build-lambda": "NODE_ENV=development netlify-lambda build handler",
     "download": "babel-node scripts/download.js cache/data.json",
-    "build-public": "browserify --standalone Schema -t babelify --outfile public/schema.js src/schema-proxy.js",
     "serve-public": "babel-node scripts/serve-public",
-    "deploy": "yarn run build-public && scripts/deploy-public",
     "prettier": "prettier --write 'src/**/*.js'",
     "print-schema": "babel-node scripts/print-schema.js",
     "store-schema": "babel-node scripts/store-schema.js"
   },
   "dependencies": {
+    "aws-serverless-express": "^3.3.6",
     "babel-runtime": "^6.26.0",
-    "cors": "^2.8.4",
+    "cors": "^2.8.5",
     "dataloader": "1.4.0",
-    "express": "^4.16.3",
-    "express-graphql": "^0.6.12",
-    "graphql": "0.13.2",
-    "graphql-relay": "0.5.5"
+    "express": "^4.17.1",
+    "express-graphql": "^0.9.0",
+    "graphql": "14.5.8",
+    "graphql-relay": "0.6.0"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.2.2",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^10.0.3",
     "babel-plugin-syntax-async-functions": "6.13.0",
+    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.6.1",
+    "babel-preset-env": "^1.7.0",
     "babel-register": "^6.26.0",
-    "babelify": "^8.0.0",
-    "browserify": "^15.0.0",
-    "browserify-shim": "^3.8.10",
-    "chai": "^4.1.2",
-    "coveralls": "^3.0.0",
-    "eslint": "^4.19.1",
-    "eslint-plugin-babel": "5.0.0",
-    "eslint-plugin-prettier": "^2.6.0",
+    "chai": "^4.2.0",
+    "coveralls": "^3.0.4",
+    "eslint": "^5.16.0",
+    "eslint-plugin-babel": "5.3.0",
+    "eslint-plugin-prettier": "^3.1.0",
     "flow-bin": "^0.69.0",
     "isomorphic-fetch": "2.2.1",
-    "isparta": "^4.0.0",
-    "mocha": "^5.0.5",
-    "prettier": "^1.11.1",
-    "sane": "^2.5.0"
+    "isparta": "^4.1.1",
+    "mocha": "^6.1.4",
+    "netlify-lambda": "^1.6.3",
+    "prettier": "^1.18.2",
+    "sane": "^4.1.0"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -23,7 +23,7 @@
     }
   </style>
   <link rel="icon" href="favicon.ico">
-  <link href="//cdn.jsdelivr.net/npm/graphiql@0.11.11/graphiql.css" rel="stylesheet" />
+  <link type="text/css" href="//unpkg.com/graphiql@0.17.0/graphiql.css" rel="stylesheet" />
 </head>
 <body>
   <div id="splash">
@@ -32,8 +32,7 @@
   <script src="//cdn.jsdelivr.net/es6-promise/4.0.5/es6-promise.auto.min.js"></script>
   <script src="//cdn.jsdelivr.net/react/15.4.2/react.min.js"></script>
   <script src="//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script>
-  <script src="//cdn.jsdelivr.net/npm/graphiql@0.11.11/graphiql.min.js"></script>
-  <script src="schema.js"></script>
+  <script src="//unpkg.com/graphiql@0.17.0/graphiql.min.js"></script>
   <script>
       // Parse the search string to get url parameters.
       var search = window.location.search;
@@ -81,10 +80,26 @@
         history.replaceState(null, null, newSearch);
       }
 
-      function graphQLFetcher(graphQLParams) {
-        const { query, variables, operationName } = graphQLParams;
-        return Schema.execute(query, variables, operationName);
-      }
+       function graphQLFetcher(graphQLParams) {
+          // This example expects a GraphQL server at the path /graphql.
+          // Change this to point wherever you host your GraphQL server.
+          return fetch(parameters.fetchURL || '/.netlify/functions/index', {
+            method: 'post',
+            headers: {
+              'Accept': 'application/json',
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(graphQLParams),
+          }).then(function (response) {
+            return response.text();
+          }).then(function (responseBody) {
+            try {
+              return JSON.parse(responseBody);
+            } catch (error) {
+              return responseBody;
+            }
+          });
+        }
 
       // Render <GraphiQL /> into the body.
       ReactDOM.render(
diff --git a/scripts/serve-public.js b/scripts/serve-public.js
@@ -10,7 +10,7 @@
 import express from 'express';
 
 const app = express();
-app.use(express.static('./public'))
+app.use(express.static('./public'));
 
 // Listen for incoming HTTP requests
 const listener = app.listen(() => {
diff --git a/src/schema-proxy.js b/src/schema-proxy.js
diff --git a/src/server.js b/src/server.js
@@ -0,0 +1,12 @@
+const app = require('./service');
+
+// Listen for incoming HTTP requests
+const listener = app.listen(process.env.PORT || undefined, () => {
+  let host = listener.address().address;
+  if (host === '::') {
+    host = 'localhost';
+  }
+  const port = listener.address().port;
+  // eslint-disable-next-line no-console
+  console.log('Listening at http://%s%s', host, port === 80 ? '' : ':' + port);
+});
diff --git a/src/server/README.md b/src/server/README.md
diff --git a/src/server/main.js b/src/server/main.js
diff --git a/src/service.js b/src/service.js
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE-examples file in the root directory of this source tree.
+ *
+ */
+
+import cors from 'cors';
+import fs from 'fs';
+import express from 'express';
+import graphqlHTTP from 'express-graphql';
+import swapiSchema from './schema/index';
+
+const app = express();
+
+app.use(cors({ origin: '*' }));
+
+// Requests to /graphql redirect to /
+app.all('/graphql', (req, res) => res.redirect('/'));
+
+// Load our own GraphiQL (since express-graphql has an older graphiql version)
+app.use('/graphiql', express.static('./public'));
+
+// Provide the static schema for reference in a few formats
+app.get('/schema', (req, res) => {
+  res.set('Content-Type', 'text');
+  fs.readFile('./schema.graphql', 'utf-8', (err, file) => {
+    res.write(Buffer.from(file));
+    res.end();
+  });
+});
+// octet-stream
+app.use('/schema.graphql', express.static('./schema.graphql'));
+
+// Finally, serve up the GraphQL Schema itself
+app.use('/', graphqlHTTP(() => ({ schema: swapiSchema })));
+
+module.exports = app;
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,10 +1,10 @@`
`1`	`1`	`{`
`2`	`2`	`"presets": [`
`3`		`- "env"`
`4`		`- ],`
	`3`	`+ ["env", { "targets": { "node": "current" }}]`
	`4`	`+ ],`
`5`	`5`	`"plugins": [`
`6`		`- "transform-flow-strip-types",`
`7`		`- "transform-object-rest-spread",`
`8`		`- "transform-runtime",`
	`6`	`+ "transform-flow-strip-types",`
	`7`	`+ "syntax-async-functions",`
	`8`	`+ "babel-plugin-syntax-object-rest-spread"`
`9`	`9`	`]`
`10`	`10`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+[build]`
	`2`	`+ functions = "netlify-lambda-lib"`