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 will have a public entry point at one place (i.e. "/"), whereas react-router allows for an unlimited amount of entry points.

I want the benefits of the webpack-dev-server, especially the hot reloading feature that is great for productivity, but I still want to be able to load routes set in react-router.

How could one implement it such that they work together? Could you run an express server in front of webpack-dev-server in such a way to allow this?

I have an extremely hacky version of something here, but it is fragile and only allows simple routes to match: github.com/natew/react-base (see make-webpack-config) and (app/routes.js) — Nathan Wienert
– Nathan Wienert, Commented Oct 5, 2014 at 14:50

Juho Vepsäläinen · Accepted Answer · 2015-02-20 07:27:10Z

107

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

answered Feb 20, 2015 at 7:27

Juho Vepsäläinen

27k13 gold badges83 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

swennemen Over a year ago

You will miss the statusbar on top of your index.html, but this works great :)

Sebastian Over a year ago

This should be the accepted answer. From the webpack dev server docs: "If you are using the HTML5 history API you probably need to serve your index.html in place of 404 responses, which can be done by setting historyApiFallback: true" If I understand the question correctly this will solve the problem.

Juho Vepsäläinen Over a year ago

@smnbbrv No probs. It actually uses connect-history-api-fallback underneath and you can pass an object with the middleware specific options if you want instead of just true.

Don P Over a year ago

Any idea how to do this with webpack-dev-middleware?

Levi Over a year ago

OR if you're using the cli, webpack-dev-server --history-api-fallback

|

ravibagul91 · Accepted Answer · 2019-09-15 11:51:38Z

69

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

edited Sep 15, 2019 at 11:51

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

answered Oct 6, 2014 at 14:14

Retozi

7,9411 gold badge26 silver badges16 bronze badges

12 Comments

Nathan Wienert Over a year ago

One question, sort of unrelated so I can open a new question if need be but I notice that now the console output from the webpack dev server isn't streamed. Before, you could watch it compile and see the percents rise, now it just block outputs after compilation.

Tobias K. Over a year ago

Nice done. This is exactly how it should be done. I added a note about the output.publicPath option, which should be an absolute url too.

nanobar Over a year ago

Thanks, what do you have in assets? In my case the bundle.js dir is called dist. I'll keep it as that unless anything else is supposed to go in there? My app is in a folder called app - should they be in the same place?

jalooc Over a year ago

It would be easier just to use a built-in webpack proxy instead. Thus you don't interfere in the server itself, you leave the server pure. Instead, you just do a little (3-5 lines) addition to webpack config. Thanks to that you modify only dev scripts for dev purposes and leave the production code (server.js) in peace (unlike in your version) and imo that's the proper way to go.

Eugene Kulabuhov Over a year ago

This answer is still correct though a bit dated. More straightforward ways are available now, look for historyApiFallback.

|

Haroen Viaene · Accepted Answer · 2017-01-15 01:35:38Z

27

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

edited Jan 15, 2017 at 1:35

Haroen Viaene

1,36618 silver badges35 bronze badges

answered Sep 10, 2016 at 4:48

Werner Weber

3793 silver badges3 bronze badges

1 Comment

Zachary Raineri Over a year ago

Thanks for the code! Is there a difference between this and just adding "historyApiFallback: true" to the same devServer object? (outside from the obvious of being able to further customize it). Just curious

Liam · Accepted Answer · 2023-01-26 09:03:46Z

15

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

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

edited Jan 26, 2023 at 9:03

Liam

30k28 gold badges143 silver badges206 bronze badges

answered May 29, 2017 at 13:43

Eugene Kulabuhov

2,5791 gold badge29 silver badges26 bronze badges

Comments

Michael Brown · Accepted Answer · 2018-03-27 01:59:09Z

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

shtuper · Accepted Answer · 2015-05-19 16:22:04Z

2

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.

edited May 19, 2015 at 16:22

answered May 19, 2015 at 12:55

shtuper

3,9263 gold badges23 silver badges29 bronze badges

1 Comment

David Sinclair Over a year ago

Does this mean some files are being watched twice? Such as the shared isomorphic/universal files?

tomasdev · Accepted Answer · 2017-06-27 21:15:44Z

1

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' }
  ]
}

answered Jun 27, 2017 at 21:15

tomasdev

6,0011 gold badge35 silver badges40 bronze badges

Comments

Alex · Accepted Answer · 2017-10-16 13:04:03Z

1

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

answered Oct 16, 2017 at 13:04

Alex

1,3251 gold badge17 silver badges13 bronze badges

Comments

Graham Norton · Accepted Answer · 2017-10-20 11:06:30Z

-1

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

answered Oct 20, 2017 at 11:06

Graham Norton

216 bronze badges

Collectives™ on Stack Overflow

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

9 Answers 9

8 Comments

12 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

8 Comments

12 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related