diff --git a/CHANGES.md b/CHANGES.md index d2696199..6960bba4 100644 --- a/CHANGES.md +++ b/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. diff --git a/README.md b/README.md index fcc4557c..498a7f21 100644 --- a/README.md +++ b/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] ``` diff --git a/docs/Commands.md b/docs/Commands.md index 5ffc52fb..9c90bafd 100644 --- a/docs/Commands.md +++ b/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 diff --git a/src/bin/nwb.js b/src/bin/nwb.js index 9f4b55a6..2338b5d9 100644 --- a/src/bin/nwb.js +++ b/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] `) diff --git a/src/devServer.js b/src/devServer.js index e4c3936e..991282ae 100644 --- a/src/devServer.js +++ b/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:') diff --git a/src/webpackServer.js b/src/webpackServer.js index ffa9e220..e5601f48 100644 --- a/src/webpackServer.js +++ b/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