Use Gatsby dev to proxy dev-server

README.md

@@ -20,7 +20,7 @@ This repository provides the tools you need to [build nextstrain.org locally](#b
 ---
 ## Build nextstrain.org locally
 
-### Install prerequisites
+### 1. Install prerequisites
 Install the node dependencies by running
 ```
 npm ci
@@ -30,11 +30,25 @@ from this directory (the "nextstrain.org" directory).
 > Using `npm ci` instead of `npm install` ensures your dependency tree matches those in `package-lock.json`.
 
 
-### Build locally mirroring the deployed (live) website
-1. `npm run build`, which runs `./build.sh` to build both the static site & an auspice client with customisations.
-2. `npm run server` will then start a local instance, by default available at [localhost:5000](http://localhost:5000).
+### 2. Build the site
+`npm run build` runs `./build.sh` to build both the static site & an auspice client with customisations.
+The following section details the different ways to serve these pages on a local server after building the site.
+
+### 3. Run server
+
+#### Run server mirroring the deployed (live) website
+`npm run server` will start a local server, by default available at [localhost:5000](http://localhost:5000).
 This should mirror exactly what you see when you visit [nextstrain.org](https://nextstrain.org).
 
+#### Run server in development mode
+If you are developing on nextstrain.org, we recommend running:
+
+`npm run dev` , which runs `./develop.sh` to launch a development server of nextstrain.org, by default available at [localhost:8000](http://localhost:8000).
+Changes to files in `./static-site` will be reflected in the corresponding pages on the development server without needing to refresh.
+
+This works by running the main nextstrain server on port 5000 and then running the Gatsby (see below for more on Gatsby) server on port 8000 and directing requests outside of Gatsby to port 5000.
+See [nextstrain.org/pull/280](https://github.com/nextstrain/nextstrain.org/pull/280) for more on this.
+
 #### Building with Nextstrain Groups (e.g. "Login") functionality
 You'll need AWS credentials configured (via environment or `~/.aws/credentials`) for the Bedford Lab account.
 If you add a new profile to `~/.aws/credentials`, you can then tell the local nextstrain.org server to use it by setting `AWS_PROFILE=...`.

auspicePaths.js

@@ -0,0 +1,48 @@
+const sources = require("./src/sources");
+
+/* Dataset and narrative paths hit Auspice's entrypoint.
+ */
+const coreBuilds = [
+  "/dengue",
+  "/ebola",
+  "/enterovirus",
+  "/flu",
+  "/lassa",
+  "/measles",
+  "/mers",
+  "/mumps",
+  "/ncov",
+  "/tb",
+  "/WNV",
+  "/yellow-fever",
+  "/zika",
+];
+
+const groups = [...sources.keys()].filter((k) => !["core", "staging", "community"].includes(k));
+
+const auspicePaths = [
+  "/status",
+  "/status/*",
+  ...coreBuilds,
+  ...coreBuilds.map((url) => url + ":*"),
+  ...coreBuilds.map(url => url + "/*"),
+  "/narratives",
+  "/narratives/*",
+  "/staging",
+  "/staging/*",
+  ...groups.map((group) => `/groups/${group}`),
+  ...groups.map((group) => `/groups/${group}/*`),
+
+  /* Auspice gets specific /community paths so it can show an index of datasets
+    * and narratives, but Gatsby gets top-level /community.
+    */
+  "/community/:user/:repo",
+  "/community/:user/:repo/*",
+
+  /* auspice gets /fetch/X URLs which result in loading of dataset accessible at URL X
+    * note that gatsby will redirect /fetch to the docs page explaining this behavior
+    */
+  "/fetch/*"
+];
+
+module.exports = auspicePaths;

develop.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+
+trap 'kill 0' EXIT
+
+npm run server &
+cd static-site && npm run develop
+
+wait

package.json

@@ -19,7 +19,8 @@
     "start": "npm run server",
     "smoke-test": "NODE_ENV=test ENV=dev jest ./test/smoke-test/auspice_client_requests.test.js",
     "smoke-test:ci": "start-server-and-test server http://localhost:5000 smoke-test",
-    "test:ci": "npm run smoke-test:ci"
+    "test:ci": "npm run smoke-test:ci",
+    "dev": "./develop.sh"
   },
   "dependencies": {
     "argparse": "^1.0.10",

server.js

@@ -8,6 +8,7 @@ const favicon = require('serve-favicon');
 const compression = require('compression');
 const argparse = require('argparse');
 const utils = require("./src/utils");
+const auspicePaths = require('./auspicePaths');
 const cors = require('cors');
 
 const production = process.env.NODE_ENV === "production";
@@ -34,7 +35,6 @@ global.verbose = args.verbose;
 // in them can use utils.verbose() at load time.
 const auspiceServerHandlers = require("./src/index.js");
 const authn = require("./authn");
-const sources = require("./src/sources");
 const redirects = require("./redirects");
 
 /* Path helpers for static assets, to make routes more readable.
@@ -101,52 +101,6 @@ app.route("/charon/getSourceInfo")
 app.route("/charon/*")
   .all((req, res) => res.status(404).end());
 
-
-/* Dataset and narrative paths hit Auspice's entrypoint.
- */
-const coreBuilds = [
-  "/dengue",
-  "/ebola",
-  "/enterovirus",
-  "/flu",
-  "/lassa",
-  "/measles",
-  "/mers",
-  "/mumps",
-  "/ncov",
-  "/tb",
-  "/WNV",
-  "/yellow-fever",
-  "/zika",
-];
-
-const groups = [...sources.keys()].filter((k) => !["core", "staging", "community"].includes(k));
-
-const auspicePaths = [
-  "/status",
-  "/status/*",
-  ...coreBuilds,
-  ...coreBuilds.map((url) => url + ":*"),
-  ...coreBuilds.map(url => url + "/*"),
-  "/narratives",
-  "/narratives/*",
-  "/staging",
-  "/staging/*",
-  ...groups.map((group) => `/groups/${group}`),
-  ...groups.map((group) => `/groups/${group}/*`),
-
-  /* Auspice gets specific /community paths so it can show an index of datasets
-   * and narratives, but Gatsby gets top-level /community.
-   */
-  "/community/:user/:repo",
-  "/community/:user/:repo/*",
-
-  /* auspice gets /fetch/X URLs which result in loading of dataset accessible at URL X
-   * note that gatsby will redirect /fetch to the docs page explaining this behavior
-   */
-  "/fetch/*"
-];
-
 app.route(auspicePaths).get((req, res) => {
   utils.verbose(`Sending Auspice entrypoint for ${req.originalUrl}`);
   res.sendFile(auspiceAssetPath("dist", "index.html"), {headers: {"Cache-Control": "no-cache, no-store, must-revalidate"}});

static-site/README.md

@@ -14,6 +14,8 @@ See [the readme](../README.md#build-nextstrainorg-locally) in the parent directo
 
 ### Developing locally
 
+For most cases, development servers for nextstrain.org can by run from the root of this repo - see the main README section: [Build nextstrain.org in development mode](../README.md#run-server-in-development-mode).
+
 To develop just the static-site part of nextstrain.org, you may run:
 
 ```
@@ -22,8 +24,7 @@ npm run develop
 ```
 
 Note that certain parts of the gatsby site rely on API handlers not implemented in the gatsby dev server.
-For these to work in development mode, you should also run the nextstrain.org server on port 5000 via
-`npm run server` from the root of this repo. 
+For these to work in development mode, you should run the gatsby dev server while also running the nextstrain.org server - see the main README section: [Build nextstrain.org in development mode](../README.md#run-server-in-development-mode).
 
 ### Testing the production build
 

static-site/gatsby-config.js

@@ -1,4 +1,6 @@
+const { createProxyMiddleware } = require("http-proxy-middleware");
 const config = require("./data/SiteConfig");
+const auspicePaths = require("../auspicePaths");
 
 // const pathPrefix = config.pathPrefix === "/" ? "" : config.pathPrefix;
 
@@ -69,5 +71,15 @@ module.exports = {
     },
     "gatsby-plugin-sharp",
     // "gatsby-plugin-catch-links" // See https://github.com/nextstrain/nextstrain.org/issues/34
-  ]
+  ],
+  developMiddleware: app => {
+    ['/charon', '/dist', ...auspicePaths].forEach(path => {
+      app.use(
+        path,
+        createProxyMiddleware({
+          target: "http://localhost:5000",
+        })
+      );
+    });
+  },
 };

static-site/package.json

@@ -53,6 +53,7 @@
     "gatsby-remark-smartypants": "^2.1.20",
     "gatsby-source-filesystem": "^2.1.46",
     "gatsby-transformer-remark": "^2.6.48",
+    "http-proxy-middleware": "^1.0.6",
     "lodash": "^4.17.15",
     "lodash-webpack-plugin": "^0.11.4",
     "mapbox-gl": "1.13.0",