Added --fallback option to nwb serve

For serving the index page from any path when developing React apps which
use the HTML5 History API.

Closes #16

CHANGES.md

@@ -4,6 +4,7 @@
 
 **Added:**
 
+- Added `--fallback` option to `nwb serve`, for serving the index page from any path when developing React apps which use the HTML5 History API [[#16](https://github.com/insin/nwb/issues/16)]
 - Added `"engines": {"node": ">=4.0.0"}` to `package.json` - nwb accidentally depends on this because it uses [qs](https://github.com/hapijs/qs) v6 - if it's a problem for you, please create an issue [[#19](https://github.com/insin/nwb/issues/19)]
 - Added `files` config to React component/web module `package.json` templates.
   - The `files` config for the React component template assumes that components published to npm with `require()` calls for CSS which ships with it will use a `css/` dir.

README.md

@@ -107,6 +107,7 @@ Development commands:
                    --coverage  create code coverage report
                    --server    keep running tests on every change
   serve          serve an app, or a component's demo app, with hot reloading
+                   --fallback  serve the index page from any path
                    --info      show webpack module info
                    --port      port to run the dev server on [3000]
 ```

docs/Commands.md

@@ -42,6 +42,7 @@ Starts a development server which serves a React app with hot reloading.
 
 **Flags:**
 
+* `--fallback` - fall back to serving the index page from any path, for developing React apps which use the HTML5 History API
 * `--info` - print info about Webpack modules after rebuilds
 * `--port=3000` - change the port the dev server runs on
 

src/bin/nwb.js

@@ -38,6 +38,7 @@ Development commands:
                    --coverage  create code coverage report
                    --server    keep running tests on every change
   serve          serve an app, or a component's demo app, with hot reloading
+                   --fallback  serve the index page from any path
                    --info      show webpack module info
                    --port      port to run the dev server on [3000]
 `)

src/devServer.js

@@ -1,3 +1,6 @@
+import fs from 'fs'
+import path from 'path'
+
 import express from 'express'
 import webpack from 'webpack'
 
@@ -9,7 +12,7 @@ import webpack from 'webpack'
  * If static path config is also provided, express will also be used to serve
  * static content from the given path.
  */
-export default function server(webpackConfig, {noInfo, port, staticPath}) {
+export default function server(webpackConfig, {fallback, noInfo, port, staticPath}) {
   let app = express()
   let compiler = webpack(webpackConfig)
 
@@ -27,6 +30,21 @@ export default function server(webpackConfig, {noInfo, port, staticPath}) {
     app.use(express.static(staticPath))
   }
 
+  if (fallback) {
+    app.use((req, res, next) => {
+      // Only fall back for GET methods which accept HTML and don't appear to
+      // end with a file extension.
+      if (req.method !== 'GET' || !req.accepts('html') || /\.[\w]{1,4}$/i.test(req.path)) {
+        return next()
+      }
+      fs.readFile(path.resolve('public/index.html'), 'utf8', (err, html) => {
+        if (err) return next(err)
+        // Rewrite relative build URLs to be absolute so they work from any path
+        res.send(html.replace(/="build\//g, '="/build/'))
+      })
+    })
+  }
+
   app.listen(port, 'localhost', err => {
     if (err) {
       console.error('nwb: error starting dev server:')

src/webpackServer.js

@@ -16,6 +16,7 @@ export default function(args, buildConfig) {
   debug('webpack config: %o', webpackConfig)
 
   devServer(webpackConfig, {
+    fallback: !!args.fallback,
     noInfo: !args.info,
     port: args.port || 3000,
     staticPath: server.staticPath