fix(gatsby): use history fallback to display client-only routes in se…

…rve (gatsbyjs#11581)

As best as I can tell--this fixes a few issues identified with
client-only routes, without causing a regression in existing
functionality.

What I validated:

- Client only routes work (and work on initial navigation, e.g. given
dynamic path /app/1234, it works when navigated to and on initial route)
- Existing routes created via SSR work
- 404 routes work (and direct 404.html route)

Fixes gatsbyjs#8080

packages/gatsby/package.json

@@ -56,6 +56,7 @@
     "eslint-plugin-react": "^7.8.2",
     "express": "^4.16.3",
     "express-graphql": "^0.6.12",
+    "express-history-api-fallback": "^2.2.1",
     "fast-levenshtein": "~2.0.4",
     "file-loader": "^1.1.11",
     "flat": "^4.0.0",

packages/gatsby/src/commands/serve.js

@@ -1,8 +1,10 @@
 /* @flow weak */
+const path = require(`path`)
 const openurl = require(`better-opn`)
 const signalExit = require(`signal-exit`)
 const compression = require(`compression`)
 const express = require(`express`)
+const historyFallback = require(`express-history-api-fallback`)
 const getConfigFile = require(`../bootstrap/get-config-file`)
 const preferDefault = require(`../bootstrap/prefer-default`)
 const chalk = require(`chalk`)
@@ -18,13 +20,16 @@ module.exports = async program => {
   let pathPrefix = config && config.pathPrefix
   pathPrefix = prefixPaths && pathPrefix ? pathPrefix : `/`
 
+  const root = path.join(program.directory, `public`)
+
   const app = express()
   const router = express.Router()
   router.use(compression())
   router.use(express.static(`public`))
+  router.use(historyFallback(`index.html`, { root }))
   router.use((req, res, next) => {
     if (req.accepts(`html`)) {
-      res.status(404).sendFile(`404.html`, { root: `public` })
+      res.status(404).sendFile(`404.html`, { root })
     } else {
       next()
     }

yarn.lock

@@ -7668,6 +7668,11 @@ express-graphql@^0.6.12:
     http-errors "^1.3.0"
     raw-body "^2.3.2"
 
+express-history-api-fallback@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/express-history-api-fallback/-/express-history-api-fallback-2.2.1.tgz#3a2ad27f7bebc90fc533d110d7c6d83097bcd057"
+  integrity sha1-OirSf3vryQ/FM9EQ18bYMJe80Fc=
+
 express@^4.16.2, express@^4.16.3:
   version "4.16.3"
   resolved "http://registry.npmjs.org/express/-/express-4.16.3.tgz#6af8a502350db3246ecc4becf6b5a34d22f7ed53"