[Solved]-How to allow for webpack-dev-server to allow entry points from react-router-Reactjs

this worked for me: just simply add the webpack middlewares first and the app.get('*'... index.html resolver later,

so express will first check if the request matches one of the routes provided by webpack (like: /dist/bundle.js or /__webpack_hmr_) and if not, then it will move to the index.html with the * resolver.

ie:

app.use(require('webpack-dev-middleware')(compiler, {
  publicpath: webpackconfig.output.publicpath,
}))
app.use(require('webpack-hot-middleware')(compiler))
app.get('*', function(req, res) {
  sendsomehtml(res)
})

historyapifallback can also be an object instead of a boolean, containing the routes.

historyapifallback: navdata && {
  rewrites: [
      { from: /route-1-regex/, to: 'route-1-example.html' }
  ]
}

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

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.

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"
  },

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").

for anyone else that may still be looking for this answer. i put together a simple proxy bypass which achieves this without much hassle and the config goes into the webpack.config.js

i am sure there are much more elegant ways to test for local content using regex, but this works for my needs.

devserver: {
  proxy: { 
    '/**': {  //catch all requests
      target: '/index.html',  //default target
      secure: false,
      bypass: function(req, res, opt){
        //your custom code to check for any exceptions
        //console.log('bypass check', {req: req, res:res, opt: opt});
        if(req.path.indexof('/img/') !== -1 || req.path.indexof('/public/') !== -1){
          return '/'
        }

        if (req.headers.accept.indexof('html') !== -1) {
          return '/index.html';
        }
      }
    }
  }
} 

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);
});