How to tell webpack dev server to serve index.html for any route

Question

React router allows applications to respond to /arbitrary/route . For this to work, I need my server to send the React application to any agreed route.

But the webpack dev server does not handle arbitrary endpoints.

There is a solution using an additional express server. How to allow webpack-dev server to allow entry points from the responder router

But I do not want to start another express server to allow route matching. I just want to tell the webpack dev server to match any url and send me its response app. you are welcome.

Answer 1

I found the simplest solution to enable a small config:

  devServer: { port: 3000, historyApiFallback: { index: 'index.html' } } 

I found this by visiting: PUSHSTATE WITH WEBPACK-DEV-SERVER .

Answer 2

The historyApiFallback parameter in the official documentation for webpack-dev-server clearly explains how to achieve this using

 historyApiFallback: true 

which just goes back to index.html when the route is not found

or

 // output.publicPath: '/foo-app/' historyApiFallback: { index: '/foo-app/' } 

Answer 3

Works for me like this

 devServer: { contentBase: "./src", hot: true, port: 3000, historyApiFallback: true }, 

Work with the riot app

Answer 4

My situation was a bit different since I am using the angular CLI with webpack and the “retrieve” option after running ng eject . I changed the exiled npm script for "npm start" in package.json to pass the -history-api-fallback flag

"start": "webpack-dev-server --port = 4200 - api-fallback history "

 "scripts": { "ng": "ng", "start": "webpack-dev-server --port=4200 --history-api-fallback", "build": "webpack", "test": "karma start ./karma.conf.js", "lint": "ng lint", "e2e": "protractor ./protractor.conf.js", "prepree2e": "npm start", "pree2e": "webdriver-manager update --standalone false --gecko false --quiet", "startold": "webpack-dev-server --inline --progress --port 8080", "testold": "karma start", "buildold": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"}, 

Answer 5

Adding a public path to the configuration helps webpack understand the real root ( / ) even when you are in subprocesses, for example. /article/uuid

Therefore, reconfigure your web package and add the following:

 output: { publicPath: "/" } devServer: { historyApiFallback: true } 

Without publicPath resources may not load properly, only index.html.

Tested on Webpack 4.6

Most of the config (just for a better picture):

 entry: "./main.js", output: { publicPath: "/", path: path.join(__dirname, "public"), filename: "bundle-[hash].js" }, devServer: { host: "domain.local", https: true, port: 123, hot: true, contentBase: "./public", inline: true, disableHostCheck: true, historyApiFallback: true } 

Answer 6

If you decide to use webpack-dev-server , you should not use it to serve the entire React application. You should use it to serve your bundle.js file bundle.js well as static dependencies. In this case, you will need to start 2 servers, one for Node.js entry points that will actually process routes and serve HTML, and the other for the package and static resources.

If you really want to use one server, you should stop using webpack-dev-server and start using webpack-dev-middleware on your application server. It will process packages on the fly (I think it supports caching and bundle.js replacement bundle.js ) and ensures that your calls to bundle.js always up to date.

Answer 7

You can enable historyApiFallback to serve index.html instead of 404 error if no other resource is found in this place.

 let devServer = new WebpackDevServer(compiler, { historyApiFallback: true, }); 

If you want to serve different files for different URIs, you can add basic rewrite rules to this option. index.html will still be served for other paths.

 let devServer = new WebpackDevServer(compiler, { historyApiFallback: { rewrites: [ { from: /^\/page1/, to: '/page1.html' }, { from: /^\/page2/, to: '/page2.html' }, { from: /^\/page3/, to: '/page3.html' }, ] }, }); 

Answer 8

I know this question applies to webpack-dev-server, but for anyone using webpack-serve 2.0. with web package 4.16.5 ; webpack-serve allows you to add add-ons. You need to create serve.config.js :

 const serve = require('webpack-serve'); const argv = {}; const config = require('./webpack.config.js'); const history = require('connect-history-api-fallback'); const convert = require('koa-connect'); serve(argv, { config }).then((result) => { server.on('listening', ({ server, options }) => { options.add: (app, middleware, options) => { // HistoryApiFallback const historyOptions = { // ... configure options }; app.use(convert(history(historyOptions))); } }); }); 

Link

You will need to change the dev script from webpack-serve to node serve.config.js .

Answer 9

For me, I had dots. "" in my path, for example, /orgs.csv so I had to put this in my Confg web package.

 devServer: { historyApiFallback: { disableDotRule: true, }, },