ReactJS routing/browser-sync reload on /path produces Cannot Get /Path error

Question

I'm building a basic React/Flux application and using react-router-component for the routing, browser-sync for live reload on build changes, and browserify for dependency injection.

The problem that I have is that when the live reload or any reload occurs on a path that isn't / (i.e. /profile, /gallery, etc...), I get an error message of Cannot GET /path (or any route for that matter).

I suspect that this has something to do with the fact that it's a single page application and all routing is done on the client.

Here is my browser-sync setup (it's very basic). I think that I might need to add some middleware, but I'm not sure what to actually put in the middleware.

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: './client'
        },
        notify: false
    });
});

Answer 1

This is likely because whatever web server you're using to serve out your app is trying to actually find /profile or /gallery on the server side. You need to instruct your server that ALL requests to anything goes to root instead. Sometimes depending on your software this is called 'html 5 mode'.

I noticed that there's a post on the browser-sync git repo about this with possible solutions here: https://github.com/shakyShane/browser-sync/issues/204

But the basic idea is to make the server send everything that isn't *.js or *.css to ./index.html (assuming that is your app's entry-point file). That way the server doesn't look for those routes itself, and it just loads your app which is then free to parse them correctly on the client-side.

Hope this helps.