How to allow for webpack-dev-server to allow entry points from react-router

Question

I\'m creating an app that uses webpack-dev-server in development alongside react-router.

It seems that webpack-dev-server is built around the assumption that you wil

Answer 1

I set up a proxy to achieve this:

You have a regular express webserver that serves the index.html on any route, except if its an asset route. if it is an asset, the request gets proxied to the web-dev-server

your react hot entrypoints will still point directly at the webpack dev server, so hot reloading still works.

Let's assume you run webpack-dev-server on 8081 and your proxy at 8080. Your server.js file will look like this:

"use strict";
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./make-webpack-config')('dev');

var express = require('express');
var proxy = require('proxy-middleware');
var url = require('url');

## --------your proxy----------------------
var app = express();
## proxy the request for static assets
app.use('/assets', proxy(url.parse('http://localhost:8081/assets')));

app.get('/*', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});


# -----your-webpack-dev-server------------------
var server = new WebpackDevServer(webpack(config), {
    contentBase: __dirname,
    hot: true,
    quiet: false,
    noInfo: false,
    publicPath: "/assets/",

    stats: { colors: true }
});

## run the two servers
server.listen(8081, "localhost", function() {});
app.listen(8080);

now make your entrypoints in the webpack config like so:

 entry: [
     './src/main.js',
     'webpack/hot/dev-server',
     'webpack-dev-server/client?http://localhost:8081'
 ]

note the direct call to 8081 for hotreload

also make sure you pass an absolute url to the output.publicPath option:

 output: {
     publicPath: "http://localhost:8081/assets/",
     // ...
 }

Answer 2

You should set historyApiFallback of WebpackDevServer as true for this to work. Here's a small example (tweak to fit your purposes):

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');

var config = require('./webpack.config');


var port = 4000;
var ip = '0.0.0.0';
new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    historyApiFallback: true,
}).listen(port, ip, function (err) {
    if(err) {
        return console.log(err);
    }

    console.log('Listening at ' + ip + ':' + port);
});

Answer 3

If you're running webpack-dev-server using CLI, you can configure it through webpack.config.js passing devServer object:

module.exports = {
  entry: "index.js",
  output: {
    filename: "bundle.js"
  },
  devServer: {
    historyApiFallback: true
  }
}

This will redirect to index.html everytime it 404 is encountered.

NOTE: If you're using publicPath, you'll need to pass it to devServer too:

module.exports = {
  entry: "index.js",
  output: {
    filename: "bundle.js",
    publicPath: "admin/dashboard"
  },
  devServer: {
    historyApiFallback: {
      index: "admin/dashboard"
    }
  }
}

You can verify that everything is setup correctly by looking at the first few lines of the output (the part with "404s will fallback to: path").

Answer 4

For a more recent answer, the current version of webpack (4.1.1) you can just set this in your webpack.config.js like such:

const webpack = require('webpack');

module.exports = {
    entry: [
      'react-hot-loader/patch',
      './src/index.js'
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: ['style-loader','css-loader']
            }
        ]
    },
    resolve: {
      extensions: ['*', '.js', '.jsx']  
    },
    output: {
      path: __dirname + '/dist',
      publicPath: '/',
      filename: 'bundle.js'
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
      contentBase: './dist',
      hot: true,
      historyApiFallback: true
    }
  };

The important part is historyApiFallback: true. No need to run a custom server, just use the cli:

"scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development"
  },

Answer 5

I'd like to add to the answer for the case when you run an isomorphic app (i.e. rendering React component server-side.)

In this case you probably also want to automatically reload the server when you change one of your React components. You do this with the piping package. All you have to do is install it and add require("piping")({hook: true}) somewhere in the beginning of you server.js. That's it. The server will restart after you change any component used by it.

This rises another problem though - if you run webpack server from the same process as your express server (as in the accepted answer above), the webpack server will also restart and will recompile your bundle every time. To avoid this you should run your main server and webpack server in different processes so that piping would restart only your express server and won't touch webpack. You can do this with concurrently package. You can find an example of this in react-isomorphic-starterkit. In the package.json he has:

"scripts": {
    ...
    "watch": "node ./node_modules/concurrently/src/main.js --kill-others 'npm run watch-client' 'npm run start'"
  },

which runs both servers simultaneously but in separate processes.

Answer 6

May be not in all cases, but seems the publicPath: '/' option in the devServer is easiest solution to fix deep routes issue, see: https://github.com/ReactTraining/react-router/issues/676