feat(basename): setup basename and redirects

Semantic-Org · Jun 2, 2016 · 3c58e1b · 3c58e1b
1 parent 88e360f
commit 3c58e1b
Show file tree

Hide file tree

Showing 12 changed files with 68 additions and 50 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -9,12 +9,5 @@
     "no-confusing-arrow": 0,
     "react/sort-comp": 1,
     "valid-jsdoc": 0
-  },
-  "globals": {
-    "__DEV__": false,
-    "__DEBUG__": false,
-    "__STAGING__": false,
-    "__TEST__": false,
-    "__PROD__": false
   }
 }
diff --git a/build/webpack.config.js b/build/webpack.config.js
@@ -4,7 +4,7 @@ import HtmlWebpackPlugin from 'html-webpack-plugin'
 import _ from 'lodash'
 
 const { paths } = config
-const { __DEV__, __TEST__ } = config.compiler_globals
+const { __BASE__, __DEV__, __TEST__ } = config.compiler_globals
 
 const webpackConfig = {
   name: 'client',
@@ -73,7 +73,8 @@ webpackConfig.plugins = [
     'window.jQuery': 'jquery',
   }),
   new HtmlWebpackPlugin({
-    template: paths.docsSrc('index.html'),
+    template: paths.docsSrc('index.ejs'),
+    baseHref: __BASE__,
     hash: false,
     filename: 'index.html',
     inject: 'body',

diff --git a/config/_default.js b/config/_default.js
@@ -6,6 +6,7 @@ const __DEV__ = env === 'development'
 const __STAGING__ = env === 'staging'
 const __TEST__ = env === 'test'
 const __PROD__ = env === 'production'
+const __BASE__ = '/'
 
 let config = {
   env,
@@ -57,7 +58,7 @@ config = {
   compiler_lint: argv.lint !== false,
   compiler_quiet: false,
   compiler_output_path: paths.base(config.dir_docs_dist),
-  compiler_public_path: '/',
+  compiler_public_path: __BASE__,
   compiler_vendor: [
     'bluebird',
     'classnames',
@@ -93,6 +94,7 @@ config = {
         NODE_ENV: JSON.stringify(env),
       },
     },
+    __BASE__: JSON.stringify(__BASE__),
     __DEV__,
     __DEBUG__: !!argv.debug,
     __STAGING__,

diff --git a/config/development.js b/config/development.js
@@ -1,7 +1,14 @@
-export default (config) => ({
-  compiler_devtool: 'source-map',
-
+export default (config) => {
   // We use an explicit public path in development to resolve this issue:
   // http://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loading-fonts/34133809#34133809
-  compiler_public_path: `http://${config.server_host}:${config.server_port}/`,
-})
+  const __BASE__ = `http://${config.server_host}:${config.server_port}/`
+
+  return {
+    compiler_devtool: 'source-map',
+    compiler_public_path: __BASE__,
+    compiler_globals: {
+      ...config.compiler_globals,
+      __BASE__: JSON.stringify(__BASE__),
+    },
+  }
+}
diff --git a/config/production.js b/config/production.js
@@ -1,11 +1,12 @@
-export default () => ({
+const __BASE__ = '/stardust/'
+
+export default (config) => ({
   compiler_fail_on_warning: true,
   compiler_hash_type: 'chunkhash',
   compiler_devtool: false,
-  // html-webpack-plugin will insert assets into the index.html based on public path
-  // this needs to be relative on gh-pages otherwise assets try to serve from
-  // technologyadvice.github.io/
-  // ...instead of
-  // technologyadvice.github.io/stardust
-  compiler_public_path: '',
+  compiler_public_path: __BASE__,
+  compiler_globals: {
+    ...config.compiler_globals,
+    __BASE__: JSON.stringify(__BASE__),
+  },
 })
diff --git a/docs/.eslintrc b/docs/.eslintrc
@@ -0,0 +1,10 @@
+{
+  "globals": {
+    "__BASE__": false,
+    "__DEV__": false,
+    "__DEBUG__": false,
+    "__STAGING__": false,
+    "__TEST__": false,
+    "__PROD__": false
+  }
+}
diff --git a/docs/app/404.html b/docs/app/404.html
@@ -3,9 +3,7 @@
 <head>
   <!-- Hack to redirect SPA routes back to the index.html -->
   <meta http-equiv="refresh" content="0;URL='http://technologyadvice.github.io/stardust'" />
-  <script>
-    sessionStorage.ghPagesRedirect = location.href
-  </script>
+  <script>sessionStorage.redirect = location.href</script>
 </head>
 <body></body>
 </html>
diff --git a/docs/app/App.js b/docs/app/App.js
@@ -1,12 +1,17 @@
 import React, { Component } from 'react'
-import { Router, browserHistory } from 'react-router'
+import { Router, useRouterHistory } from 'react-router'
+import { createHistory } from 'history'
 
 import routes from './routes'
 
+const history = useRouterHistory(createHistory)({
+  basename: __BASE__,
+})
+
 export default class App extends Component {
   render() {
     return (
-      <Router history={browserHistory} routes={routes} />
+      <Router history={history} routes={routes} />
     )
   }
 }
diff --git a/docs/app/index.ejs b/docs/app/index.ejs
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <!-- baseHref value already includes quotes "/foo" -->
+  <base href=<%= htmlWebpackPlugin.options.baseHref %> />
+  <title>Stardust</title>
+  <script>
+    // Apply gh-pages SPA redirect that was applied in 404.html
+    (function() {
+      var redirect = sessionStorage.redirect
+      delete sessionStorage.redirect
+      if (redirect && redirect !== location.href) {
+        history.replaceState(null, null, redirect)
+      }
+    })()
+  </script>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/docs/app/index.html b/docs/app/index.html
diff --git a/docs/app/routes.js b/docs/app/routes.js
@@ -11,7 +11,7 @@ const routes = (
     <Route path='elements'>
       <Route path='button' component={ButtonExamples} />
     </Route>
-    <Route path='*' onEnter={redirect('/')} />
+    <Route path='*' onEnter={redirect(__BASE__)} />
   </Route>
 )
 

diff --git a/package.json b/package.json
@@ -13,8 +13,7 @@
     "prebuild:dist": "rimraf dist",
     "build:dist": "babel src -d dist",
     "build:docs": "gulp docs",
-    "clean": "while read line; do rm -rf $line; done < .gitignore",
-    "predeploy:docs": "npm run build:docs",
+    "predeploy:docs": "NODE_ENV=production npm run build:docs",
     "deploy:docs": "gh-pages -d docs/build -m 'deploy docs [ci skip]'",
     "lint": "eslint .",
     "lint:fix": "npm run lint -- --fix",