Move remotedev server to npm script instead of always starting (#849)

Most people aren't going to use this so don't ship it to everyone.

Also, more pressing, the remotedev server spits out a big error on
startup right now which is very confusing.

Author: KyleAMathews

CONTRIBUTING.md

@@ -35,4 +35,45 @@ The usual contributing steps are:
 * Commit and push to your fork.
 * Create an pull request from your branch.
 
-This project uses [FlowType](https://flowtype.org/) for static type checking.
+## Development tools
+
+### Redux devtools
+
+Gatsby uses Redux for managing state during development and building. It's
+often helpful to see the flow of actions and builtup state for a site you're
+working on or if adding new functionality to core. We leverage
+https://github.com/zalmoxisus/remote-redux-devtools and
+https://github.com/zalmoxisus/remotedev-server to give you use the Redux
+devtools extension for debugging Gatsby.
+
+To use this, first install
+[redux-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension)
+in your browser. Then in your Gatsby repo, run `npm run remotedev`. Then
+in your site directory run `gatsby develop`.
+
+At this point, your site will be sending Redux actions and state to the remote server.
+
+To connect to this, you need to setup the devtools extension to talk to the remote
+server.
+
+First open the remote devtools.
+
+![how to open the redux remote devtools extension](./images/open-remote-dev-tools.png)
+
+Then click settings along the bottom menu and set the host and port.
+
+![how to set the host/port for the remote devtools extension to connect to Gatsby](./images/remote-dev-settings.png)
+
+After this, the devtools extension *should* connect to the remote server and you'll
+see actions start showing up.
+
+![gatsby redux remote devtools](./images/running-redux-devtools.png)
+
+**Warning!! Lots of buginess**. While having this available is extreamly
+helpful, this setup is very buggy and fragile. There is a memory leak in the
+extension that's triggered it seems every time you restart the Gatsby
+development server. Also the extension often, for no apparent reason, just
+won't show any actions from the remote server. It'll also often freeze up. The
+best solution seems to just be turning everything off and on again.  Fixing up
+these tools would be very helpful for us and many others using these tools if
+someone wants to take this on!

docs/docs/images/open-remote-dev-tools.png

@@ -31,6 +31,7 @@
     "lerna": "^2.0.0-rc.3",
     "prettier": "^1.2.2",
     "purdy": "^2.2.1",
+    "remotedev-server": "^0.2.2",
     "rimraf": "^2.6.1"
   },
   "jest": {
@@ -61,6 +62,7 @@
     "format": "npm run format-packages && npm run format-gatsby && npm run format-www && npm run format-examples",
     "publish-canary": "lerna run build; lerna publish --canary --yes",
     "publish-next": "lerna run build; lerna publish --npm-tag=next",
+    "remotedev": "remotedev --hostname=localhost --port=19999",
     "test": "jest",
     "test:watch": "jest --watch",
     "test_bkup": "npm run lint && npm run test-node && npm run test-integration",

docs/docs/images/remote-dev-settings.png

@@ -17,10 +17,11 @@ try {
   // ignore errors.
 }
 
+const sitePackageJSON = require(`${process.cwd()}/package.json`)
 const composeEnhancers = composeWithDevTools({
   realtime: true,
   port: 19999,
-  name: `gatsby-redux`,
+  name: sitePackageJSON.name,
 })
 
 let store
@@ -67,7 +68,11 @@ const getNode = id => {
 exports.getNode = getNode
 exports.hasNodeChanged = (id, digest) => {
   const node = store.getState().nodes[id]
-  return node.contentDigest !== digest
+  if (!node) {
+    return true
+  } else {
+    return node.contentDigest !== digest
+  }
 }
 
 exports.loadNodeContent = node => {

docs/docs/images/running-redux-devtools.png

@@ -11,12 +11,8 @@ const ReactDOMServer = require("react-dom/server")
 const rl = require("readline")
 const parsePath = require("parse-filepath")
 const _ = require("lodash")
-const remotedev = require("remotedev-server")
 const { store } = require("../redux")
 
-// Start the dev server for Redux.
-remotedev({ hostname: "localhost", port: 19999 })
-
 const rlInterface = rl.createInterface({
   input: process.stdin,
   output: process.stdout,

package.json

@@ -100,7 +100,6 @@
     "remark-html": "^5.0.1",
     "remark-parse": "^2.2.0",
     "remote-redux-devtools": "^0.5.7",
-    "remotedev-server": "^0.3.0-beta-3",
     "sanitize-html": "^1.13.0",
     "sift": "^3.2.6",
     "slash": "^1.0.0",

packages/gatsby/lib/redux/index.js

@@ -1,13 +1,16 @@
 /* @flow */
 
-import type { Connection, ConnectionArguments, Edge } from "./connectiontypes"
+import type {
+  Connection,
+  ConnectionArguments,
+} from './connectiontypes'
 
 /**
  * A simple function that accepts an array and connection arguments, and returns
  * a connection object for use in GraphQL. It uses array offsets as pagination,
  * so pagination will only work if the array is static.
  */
-export function connectionFromArray<T>(
+export function connectionFromArray<T> (
   data: Array<T>,
   args: ConnectionArguments
 ): Connection<T> {
@@ -27,11 +30,11 @@ export function connectionFromArray<T>(
       throw new Error(`Argument "limit" must be a non-negative integer`)
     }
 
-    endSlice = startSlice + limit
+    endSlice = (startSlice + limit)
   }
 
   const slice = data.slice(startSlice, endSlice)
-  const edges = slice.map((value: any, index: number) => {
+  const edges = slice.map((value, index) => {
     const orgIndex = startSlice + index
     let next
     let previous
@@ -48,12 +51,12 @@ export function connectionFromArray<T>(
     }
   })
 
+
   return {
     edges,
     pageInfo: {
-      hasNextPage: typeof limit === `number`
-        ? limit + startSlice - 1 < data.length
-        : false,
+      hasNextPage:
+        typeof limit === `number` ? (limit + startSlice) - 1 < data.length : false,
     },
   }
 }
@@ -62,7 +65,7 @@ export function connectionFromArray<T>(
  * A version of `connectionFromArray` that takes a promised array, and returns a
  * promised connection.
  */
-export function connectionFromPromisedArray<T>(
+export function connectionFromPromisedArray<T> (
   dataPromise: Promise<Array<T>>,
   args: ConnectionArguments
 ): Promise<Connection<T>> {

packages/gatsby/lib/utils/develop.js

@@ -5,30 +5,30 @@
  */
 export type PageInfo = {
   hasPreviousPage: ?boolean,
-  hasNextPage: ?boolean,
+  hasNextPage: ?boolean
 };
 
 /**
  * A flow type designed to be exposed as a `Connection` over GraphQL.
  */
 export type Connection<T> = {
-  edges: Array<Edge<T>>,
-  pageInfo: PageInfo,
+  edges: Array<Edge<T>>;
+  pageInfo: PageInfo;
 };
 
 /**
  * A flow type designed to be exposed as a `Edge` over GraphQL.
  */
 export type Edge<T> = {
-  node: T,
-  next: T,
-  previous: T,
+  node: T;
+  next: T;
+  previous: T;
 };
 
 /**
  * A flow type describing the arguments a connection field receives in GraphQL.
  */
 export type ConnectionArguments = {
-  skip?: ?number,
-  limit?: ?number,
+  skip?: ?number;
+  limit?: ?number;
 };