Support webpack-dev-server historyApiFallback: true

[fellz]

Hi
I don't know exactly is this issue with webpack but i think so
I have simple config for router

var ReactappApp = require('./ReactappApp');
var HelloWorld = require('./HelloWorld');
var React = require('react');
var Router = require('react-router');
var Route = Router.Route;


var content = document.getElementById('content');

var Routes = (
  <Route path="/" handler={ReactappApp}>
    <Route name="hello" path="hello" handler={HelloWorld}/>
  </Route>
);
console.log(Routes);
Router.run(Routes,Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, content);
});

So i try to load HelloWorld component at /hello and get Cannot GET /hello
So server doesn't see this route

I use grunt and connect also.
Here is grunt task for webpack:

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

and here is webpack config
https://gist.github.com/fellz/b2cc0de81c7b1f5bf442#file-webpack-config

with historyApiFallback: true

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

it's loading ReactappApp instead of HelloWorld

p.s. react-router-component works as expected and perfectly well

[gaearon]

This is not the router's problem: Webpack just doesn't know you're using pushstate and tries to actually serve /hello from filesystem.

The proper way to do that is to run pushstate server separately and set contentBase to its port.

A hackish but simpler way to do that is to inject a middleware (note this relies on undocumented property and may stop working in future):

    server = new WebpackDevServer(webpack(config), {
      contentBase: contentBase,
      publicPath: config.output.publicPath,
      hot: true
    });

    server.app.use(function pushStateHook(req, res, next) {
      var ext = path.extname(req.url);
      if ((ext === '' || ext === '.html') && req.url !== '/') {
        req.pipe(request(localURL)).pipe(res);
      } else {
        next();
      }
    });

Can't say how to translate this to grunt task tho.

[fellz]

@gaearon
Ok thanks
btw why react-router-components works fine with this stuff ?

[gaearon]

I don't know, it shouldn't. If server doesn't serve index.html on /hello, there's nothing any router can do about it.

[fellz]

@gaearon well key diff in this historyApiFallback: true react-router-component works fine with this option and react-router is not ...

[gaearon]

I'm not sure what historyApiFallback is (couldn't find it in react-router-component docs) but you can fall back to Router.HashLocation if you'd like.

[fellz]

@gaearon historyApiFallback is an option for webpack-dev-server that you familiar with ) look at the last line

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

[gaearon]

Ah, thanks. I didn't know dev server supports this. So you're saying it doesn't work with RR but works with RRC?

[fellz]

@gaearon exactly

[gaearon]

I'll take a look, thanks for reporting!

[mjackson]

@gaearon do you know what the core issue is with historyApiFallback: true?

[gaearon]

I'll take a look now, sorry for delay

[gaearon]

I couldn't reproduce the problem. In my testing, historyApiFallback works fine with RR.

[nelix]

I find historyApiFallback works with shallow routes but not deep routes, I'm not sure it has anything to do with react-router though.
The reason seems to be requests to my app.js are not resolved to the root like other requests are?
GET http://localhost:8080/orgs/-Jfah70YYREFxUpYaG4C/endpoints/app.js fails?

[fellz]

I found a problem there
have to configure routes properly like this:

var routes = [
    <Route path="/" handler={App} />,
    <Route path="/hello" handler={Hello} />
] 

but still RR doesn't work if you want your routes without hashes (Router.HistoryLocation)

• historyApiFallback: true flag in webpack-dev-server options must be set

p.s. full project with code is here https://github.com/fellz/react-webpack-app