Improved example environment config.

Author: jaydenseric

.gitignore

@@ -3,4 +3,3 @@ package-lock.json
 npm-debug.log
 .DS_Store
 lib
-.next

changelog.md

@@ -6,6 +6,7 @@
 * Replaced [`isomorphic-unfetch`](https://npm.im/isomorphic-unfetch) with the more updated [`cross-fetch`](https://npm.im/cross-fetch).
 * Added a `fetchError` `Query` render function argument, enabling graceful caching and handling of errors in situations such as when a global `fetch` API is unavailable or a relative URL is used on the sever.
 * Use `.prettierignore` to defer `package.json` formatting to npm.
+* Improved example project environment config and deployed it to [graphql-react.now.sh](https://graphql-react.now.sh).
 
 ## 1.0.0-alpha.3
 

example/.gitignore

@@ -0,0 +1,2 @@
+.next
+.env

example/api-fetch-options.js

@@ -1,5 +1,5 @@
 export const timeFetchOptionsOverride = options => {
-  options.url = 'http://localhost:3000/graphql'
+  options.url = process.env.API_URL
 }
 
 export const pokemonFetchOptionsOverride = options => {

example/example.env

@@ -0,0 +1,4 @@
+NODE_ENV='development'
+DOMAIN='http://localhost'
+PORT=3000
+API_URL='http://localhost:3000/graphql'

example/package.json

@@ -1,9 +1,12 @@
 {
+  "name": "graphql-react-example",
   "private": true,
   "dependencies": {
     "@std/esm": "^0.25.5",
     "apollo-server-koa": "^1.3.3",
+    "babel-plugin-transform-inline-environment-variables": "^0.3.0",
     "cross-fetch": "^2.1.0",
+    "dotenv-cli": "^1.4.0",
     "graphql": "^0.13.2",
     "graphql-react": "latest",
     "graphql-tools": "^2.23.1",
@@ -14,15 +17,35 @@
     "react": "^16.3.0-alpha.3",
     "react-dom": "^16.3.0-alpha.3"
   },
+  "devDependencies": {
+    "now": "^10.2.1"
+  },
   "scripts": {
-    "dev": "NODE_ENV=development node -r @std/esm server.mjs",
-    "build": "next build",
-    "start": "NODE_ENV=production node -r @std/esm server.mjs"
+    "build": "dotenv next build",
+    "start": "dotenv node -- -r @std/esm server.mjs",
+    "deploy": "now"
+  },
+  "babel": {
+    "presets": [
+      "next/babel"
+    ],
+    "plugins": [
+      "transform-inline-environment-variables"
+    ]
   },
   "eslintConfig": {
     "rules": {
       "react/react-in-jsx-scope": "off",
       "react/prop-types": "off"
     }
+  },
+  "now": {
+    "alias": "graphql-react",
+    "env": {
+      "NODE_ENV": "production",
+      "DOMAIN": "https://graphql-react.now.sh",
+      "PORT": 80,
+      "API_URL": "https://graphql-react.now.sh/graphql"
+    }
   }
 }

example/readme.md

@@ -1,9 +1,10 @@
 # graphql-react example
 
-Example [Next.js](https://npm.im/next) app and GraphQL API.
+Example GraphQL API and [Next.js](https://npm.im/next) app demonstrating `graphql-react`: [graphql-react.now.sh](https://graphql-react.now.sh).
 
-To get started, in Terminal run:
+## Setup
 
-```shell
-git clone https://github.com/jaydenseric/graphql-react.git && cd graphql-react/example && npm install && npm run dev
-```
+1.  [Download the project](https://github.com/jaydenseric/graphql-react/archive/master.zip).
+2.  Use Terminal to enter the `example` directory.
+3.  Run `cp example.env .env && npm install`. The port can be configured in `.env`.
+4.  Run `npm start`.

example/server.mjs

@@ -23,17 +23,16 @@ const router = new Router()
 
 const nextApp = next({ dev: process.env.NODE_ENV === 'development' })
 const nextRequestHandler = nextApp.getRequestHandler()
-const port = 3000
 
 nextApp.prepare().then(() =>
   new Koa()
     .use(router.routes())
     .use(router.allowedMethods())
-    .listen(port, error => {
+    .listen(process.env.PORT, error => {
       if (error) throw error
       // eslint-disable-next-line no-console
       console.info(
-        `Serving http://localhost:${port} for ${process.env.NODE_ENV}.`
+        `Serving localhost:${process.env.PORT} for ${process.env.NODE_ENV}.`
       )
     })
 )

readme.md

@@ -35,7 +35,7 @@ A lightweight GraphQL client for React; the first Relay and Apollo alternative w
 
 Install with [npm](https://npmjs.com):
 
-```shell
+```sh
 npm install graphql-react
 ```