Move remotedev server to npm script instead of always starting

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.
gatsbyjs · Apr 24, 2017 · 70fdcf1 · 70fdcf1
1 parent 8031a00
commit 70fdcf1
Show file tree

Hide file tree

Showing 11 changed files with 669 additions and 35 deletions.
diff --git a/CONTRIBUTING.md b/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!
diff --git a/docs/docs/images/open-remote-dev-tools.png b/docs/docs/images/open-remote-dev-tools.png
diff --git a/docs/docs/images/remote-dev-settings.png b/docs/docs/images/remote-dev-settings.png
diff --git a/docs/docs/images/running-redux-devtools.png b/docs/docs/images/running-redux-devtools.png
diff --git a/package.json b/package.json
@@ -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_bkup": "npm run lint && npm run test-node && npm run test-integration",
     "watch": "lerna run watch --no-sort --stream --concurrency 999"

diff --git a/packages/gatsby/lib/redux/index.js b/packages/gatsby/lib/redux/index.js
@@ -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 => {

diff --git a/packages/gatsby/lib/utils/develop.js b/packages/gatsby/lib/utils/develop.js
@@ -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,

diff --git a/packages/gatsby/package.json b/packages/gatsby/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",

diff --git a/packages/graphql-skip-limit/src/connection/arrayconnection.js b/packages/graphql-skip-limit/src/connection/arrayconnection.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>> {

diff --git a/packages/graphql-skip-limit/src/connection/connectiontypes.js b/packages/graphql-skip-limit/src/connection/connectiontypes.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;
 };