webpack-dev-server react-router push state

Question

I am trying to get react-router to work with webpack-dev-server but keep getting cannot Get /SOMEURL. This is because webpack-dev-server is looking for that specific file but cannot find it. I'd like webpack to resort to using react-router vs searching for the files itself.

How can I set that up?

My grunt:

'webpack-dev-server': {
      options: {
        hot: true,
        port: 8000,
        webpack: webpackDevConfig,
        publicPath: '/assets/',
        contentBase: './<%= pkg.src %>/'
      },

      start: {
        keepAlive: true,
      }
    },

score 18 · Accepted Answer · answered Mar 08 '15 at 06:50

18

Use the --history-api-fallback option to webpack-dev-server. This uses connect-history-api-fallback to serve up index.html if the route doesn't match any other files. (This does mean you have to use index.html as the filename for your HTML page.)

answered Mar 08 '15 at 06:50

Michelle Tilley

157,729
40
374
311

That ended up always going to the DefaultRoute everytime rather than other routes I specified – Mohamed El Mahallawy Mar 08 '15 at 09:56
That sounds like a problem with the routing setup, not webpack. Do you have code you can share? – Michelle Tilley Mar 08 '15 at 18:02
Ended up solving with /#/ – Mohamed El Mahallawy Mar 10 '15 at 23:25
3

Nice answer, better save this configuration in `webpack.config.js`, just add `devServer: { historyApiFallback: true }` to `webpack.config.js` – soulmachine Dec 07 '15 at 11:25
similar issue, same solution [Another SO Question](http://stackoverflow.com/a/35372798/3050426) – pravin Jul 02 '16 at 15:19
this works but not with react hot loader, see here: http://stackoverflow.com/questions/40159965/enable-single-page-app-react-hot-reload-webpack – Marc Oct 24 '16 at 09:05

ReduxDJ · Answer 2 · 2016-06-01T22:14:16.700

2

For me, i had this in my index file:

<script src="./assets/app.js"></script>

rather than

 <script src="/assets/app.js"></script>

So, it looks like the history fallback API was in competition with my misconfiguration.

edited Jun 01 '16 at 22:14

answered Jun 01 '16 at 22:06

ReduxDJ

480
7
14

webpack-dev-server react-router push state

2 Answers2

Linked