feat(gatsby): add assetPrefix to support deploying assets separate from html

.eslintrc.json

@@ -26,7 +26,9 @@
   "globals": {
     "before": true,
     "spyOn": true,
-    "__PATH_PREFIX__": true
+    "__PATH_PREFIX__": true,
+    "__BASE_PATH__": true,
+    "__ASSET_PREFIX__": true
   },
   "rules": {
     "arrow-body-style": [

packages/gatsby-link/src/__tests__/index.js

@@ -9,7 +9,7 @@ import {
 import Link, { navigate, push, replace, withPrefix } from "../"
 
 afterEach(() => {
-  global.__PATH_PREFIX__ = ``
+  global.__BASE_PATH__ = ``
   cleanup()
 })
 
@@ -34,12 +34,12 @@ const getReplace = () => {
 }
 
 const getWithPrefix = (pathPrefix = ``) => {
-  global.__PATH_PREFIX__ = pathPrefix
+  global.__BASE_PATH__ = pathPrefix
   return withPrefix
 }
 
 const setup = ({ sourcePath = `/active`, linkProps, pathPrefix = `` } = {}) => {
-  global.__PATH_PREFIX__ = pathPrefix
+  global.__BASE_PATH__ = pathPrefix
   const source = createMemorySource(sourcePath)
   const history = createHistory(source)
 
@@ -151,11 +151,11 @@ describe(`navigate`, () => {
 
   it(`respects pathPrefix`, () => {
     const to = `/some-path`
-    global.__PATH_PREFIX__ = `/blog`
+    global.__BASE_PATH__ = `/blog`
     getNavigate()(to)
 
     expect(global.___navigate).toHaveBeenCalledWith(
-      `${global.__PATH_PREFIX__}${to}`,
+      `${global.__BASE_PATH__}${to}`,
       undefined
     )
   })

packages/gatsby-link/src/index.js

@@ -1,4 +1,4 @@
-/*global __PATH_PREFIX__ */
+/*global __BASE_PATH__ */
 import PropTypes from "prop-types"
 import React from "react"
 import { Link } from "@reach/router"
@@ -8,7 +8,7 @@ import { parsePath } from "./parse-path"
 export { parsePath }
 
 export function withPrefix(path) {
-  return normalizePath(`${__PATH_PREFIX__}/${path}`)
+  return normalizePath(`${__BASE_PATH__}/${path}`)
 }
 
 function normalizePath(path) {

packages/gatsby-plugin-catch-links/src/__tests__/catch-links.js

@@ -4,7 +4,7 @@ import { navigate } from "gatsby"
 import * as catchLinks from "../catch-links"
 
 beforeAll(() => {
-  global.__PATH_PREFIX__ = ``
+  global.__BASE_PATH__ = ``
   // Set the base URL we will be testing against to http://localhost:8000/blog
   window.history.pushState({}, `APP Url`, `${pathPrefix}`)
 })
@@ -365,13 +365,13 @@ describe(`pathPrefix is handled if catched link to ${pathPrefix}/article navigat
   })
 
   afterAll(() => {
-    global.__PATH_PREFIX__ = ``
+    global.__BASE_PATH__ = ``
     eventDestroyer()
   })
 
   test(`on sites with pathPrefix '${pathPrefix}'`, done => {
     // simulate case with --prefix-paths and prefix /blog
-    global.__PATH_PREFIX__ = pathPrefix
+    global.__BASE_PATH__ = pathPrefix
 
     // create the element with href /blog/article
     const clickElement = document.createElement(`a`)
@@ -408,7 +408,7 @@ describe(`pathPrefix is handled if catched link to ${pathPrefix}/article navigat
 
   test(`on sites without pathPrefix`, done => {
     // simulate default case without --prefix-paths
-    global.__PATH_PREFIX__ = ``
+    global.__BASE_PATH__ = ``
 
     // create the element with href /blog/article
     const clickElement = document.createElement(`a`)

packages/gatsby-plugin-feed/src/__tests__/gatsby-ssr.js

@@ -1,14 +1,13 @@
 const { onRenderBody } = require(`../gatsby-ssr`)
 
-const defaultPathPrefix = global.__PATH_PREFIX__
-
 describe(`Adds <Link> for feed to head`, () => {
+  const prefix = global.__BASE_PATH__
   beforeEach(() => {
-    global.__PATH_PREFIX__ = ``
+    global.__BASE_PATH__ = ``
   })
 
-  afterEach(() => {
-    global.__PATH_PREFIX__ = defaultPathPrefix
+  afterAll(() => {
+    global.__BASE_PATH__ = prefix
   })
 
   it(`creates Link if feeds does exist`, async () => {
@@ -55,7 +54,7 @@ describe(`Adds <Link> for feed to head`, () => {
     expect(setHeadComponents).toHaveBeenCalledTimes(1)
   })
   it(`creates Link href with path prefix when __PATH_PREFIX__ sets`, async () => {
-    global.__PATH_PREFIX__ = `/hogwarts`
+    global.__BASE_PATH__ = `/hogwarts`
 
     const pluginOptions = {
       feeds: [

packages/gatsby-plugin-manifest/src/__tests__/gatsby-ssr.js

@@ -9,7 +9,7 @@ const ssrArgs = {
 
 describe(`gatsby-plugin-manifest`, () => {
   beforeEach(() => {
-    global.__PATH_PREFIX__ = ``
+    global.__BASE_PATH__ = ``
     headComponents = []
   })
 
@@ -130,7 +130,7 @@ describe(`gatsby-plugin-manifest`, () => {
   })
 
   it(`Creates href attributes using pathPrefix`, () => {
-    global.__PATH_PREFIX__ = `/path-prefix`
+    global.__BASE_PATH__ = `/path-prefix`
 
     onRenderBody(ssrArgs, {
       icon: true,

packages/gatsby/cache-dir/__tests__/static-entry.js

@@ -136,6 +136,7 @@ describe(`develop-static-entry`, () => {
 describe(`static-entry`, () => {
   beforeEach(() => {
     global.__PATH_PREFIX__ = ``
+    global.__BASE_PATH__ = ``
   })
 
   test(`onPreRenderHTML can be used to replace headComponents`, done => {

packages/gatsby/cache-dir/loader.js

@@ -203,7 +203,7 @@ let disableCorePrefetching = false
 
 const queue = {
   addPagesArray: newPages => {
-    findPage = pageFinderFactory(newPages, __PATH_PREFIX__)
+    findPage = pageFinderFactory(newPages, __BASE_PATH__)
   },
   addDevRequires: devRequires => {
     syncRequires = devRequires

packages/gatsby/cache-dir/production-app.js

@@ -77,18 +77,17 @@ apiRunnerAsync(`onClientEntry`).then(() => {
     // pages have this canonical path)
     !page.path.match(/^\/offline-plugin-app-shell-fallback\/?$/)
   ) {
-    navigate(
-      __PATH_PREFIX__ + page.path + browserLoc.search + browserLoc.hash,
-      { replace: true }
-    )
+    navigate(__BASE_PATH__ + page.path + browserLoc.search + browserLoc.hash, {
+      replace: true,
+    })
   }
 
   loader.getResourcesForPathname(browserLoc.pathname).then(() => {
     const Root = () =>
       createElement(
         Router,
         {
-          basepath: __PATH_PREFIX__,
+          basepath: __BASE_PATH__,
         },
         createElement(RouteHandler, { path: `/*` })
       )

packages/gatsby/cache-dir/static-entry.js

@@ -155,11 +155,11 @@ export default (pagePath, callback) => {
 
   const routerElement = createElement(
     ServerLocation,
-    { url: `${__PATH_PREFIX__}${pagePath}` },
+    { url: `${__BASE_PATH__}${pagePath}` },
     createElement(
       Router,
       {
-        baseuri: `${__PATH_PREFIX__}`,
+        baseuri: `${__BASE_PATH__}`,
       },
       createElement(RouteHandler, { path: `/*` })
     )

packages/gatsby/src/commands/serve.js

@@ -65,6 +65,15 @@ module.exports = async program => {
     }
     return next()
   })
+  app.use(function(req, res, next) {
+    res.header(`Access-Control-Allow-Origin`, `http://${host}:${port}`)
+    res.header(`Access-Control-Allow-Credentials`, true)
+    res.header(
+      `Access-Control-Allow-Headers`,
+      `Origin, X-Requested-With, Content-Type, Accept`
+    )
+    next()
+  })
   app.use(pathPrefix, router)
 
   const server = app.listen(port, host, () => {

packages/gatsby/src/joi-schemas/joi.js

@@ -1,10 +1,18 @@
 const Joi = require(`joi`)
 
+const stripTrailingSlash = chain => chain.replace(/(\w)\//, `$1`)
+
 export const gatsbyConfigSchema = Joi.object().keys({
   __experimentalThemes: Joi.array(),
   polyfill: Joi.boolean(),
   siteMetadata: Joi.object(),
-  pathPrefix: Joi.string(),
+  assetPrefix: stripTrailingSlash(Joi.string().uri()),
+  pathPrefix: stripTrailingSlash(
+    Joi.string().uri({
+      allowRelative: true,
+      relativeOnly: true,
+    })
+  ),
   mapping: Joi.object(),
   plugins: Joi.array(),
   proxy: Joi.object().keys({

packages/gatsby/src/utils/eslint-config.js

@@ -7,6 +7,7 @@ module.exports = schema => {
       globals: {
         graphql: true,
         __PATH_PREFIX__: true,
+        __BASE_PATH__: true, // this will rarely, if ever, be used by consumers
       },
       extends: `react-app`,
       plugins: [`graphql`],

packages/gatsby/src/utils/path.js

@@ -13,3 +13,7 @@ export function joinPath(...paths) {
 export function withBasePath(basePath) {
   return (...paths) => joinPath(basePath, ...paths)
 }
+
+export function withTrailingSlash(basePath) {
+  return basePath.replace(/([\/]+)?$/, `/`)
+}

packages/gatsby/src/utils/webpack.config.js

@@ -2,13 +2,14 @@ require(`v8-compile-cache`)
 
 const fs = require(`fs-extra`)
 const path = require(`path`)
+const url = require(`url`)
 const dotenv = require(`dotenv`)
 const FriendlyErrorsWebpackPlugin = require(`friendly-errors-webpack-plugin`)
 const { store } = require(`../redux`)
 const { actions } = require(`../redux/actions`)
 const debug = require(`debug`)(`gatsby:webpack-config`)
 const report = require(`gatsby-cli/lib/reporter`)
-const { withBasePath } = require(`./path`)
+const { withBasePath, withTrailingSlash } = require(`./path`)
 
 const apiRunnerNode = require(`./api-runner-node`)
 const createUtils = require(`./webpack-utils`)
@@ -20,12 +21,7 @@ const hasLocalEslint = require(`./local-eslint-config-finder`)
 //   3) build-javascript: Build JS and CSS chunks for production
 //   4) build-html: build all HTML files
 
-module.exports = async (
-  program,
-  directory,
-  suppliedStage,
-  webpackPort = 1500
-) => {
+module.exports = async (program, directory, suppliedStage) => {
   const directoryPath = withBasePath(directory)
 
   process.env.GATSBY_BUILD_STAGE = suppliedStage
@@ -35,6 +31,15 @@ module.exports = async (
   const stage = suppliedStage
   const { rules, loaders, plugins } = await createUtils({ stage, program })
 
+  const { assetPrefix, pathPrefix } = store.getState().config
+
+  let publicPath = `/`
+  if (program.prefixPaths && (pathPrefix || assetPrefix)) {
+    publicPath = url.resolve(
+      ...[assetPrefix, pathPrefix].map(part => part || ``)
+    )
+  }
+
   function processEnv(stage, defaultNodeEnv) {
     debug(`Building env for "${stage}"`)
     const env = process.env.NODE_ENV
@@ -91,7 +96,7 @@ module.exports = async (
       if (pubPath.substr(-1) === `/`) {
         hmrBasePath = pubPath
       } else {
-        hmrBasePath = `${pubPath}/`
+        hmrBasePath = withTrailingSlash(pubPath)
       }
     }
 
@@ -126,18 +131,14 @@ module.exports = async (
           library: `lib`,
           umdNamedDefine: true,
           globalObject: `this`,
-          publicPath: program.prefixPaths
-            ? `${store.getState().config.pathPrefix}/`
-            : `/`,
+          publicPath: withTrailingSlash(publicPath),
         }
       case `build-javascript`:
         return {
           filename: `[name]-[contenthash].js`,
           chunkFilename: `[name]-[contenthash].js`,
           path: directoryPath(`public`),
-          publicPath: program.prefixPaths
-            ? `${store.getState().config.pathPrefix}/`
-            : `/`,
+          publicPath: withTrailingSlash(publicPath),
         }
       default:
         throw new Error(`The state requested ${stage} doesn't exist.`)
@@ -181,8 +182,10 @@ module.exports = async (
       // optimizations for React) and what the link prefix is (__PATH_PREFIX__).
       plugins.define({
         ...processEnv(stage, `development`),
-        __PATH_PREFIX__: JSON.stringify(
-          program.prefixPaths ? store.getState().config.pathPrefix : ``
+        __BASE_PATH__: JSON.stringify(program.prefixPaths ? pathPrefix : ``),
+        __PATH_PREFIX__: JSON.stringify(program.prefixPaths ? publicPath : ``),
+        __ASSET_PREFIX__: JSON.stringify(
+          program.prefixPaths ? assetPrefix : ``
         ),
       }),
     ]

www/package.json

@@ -5,6 +5,7 @@
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
     "@reach/skip-nav": "^0.1.1",
+    "@reach/visually-hidden": "^0.1.2",
     "axios": "^0.18.0",
     "bluebird": "^3.5.1",
     "dotenv": "^6.0.0",