Browser-sync: HTML5 mode for single page apps

[pensierinmusica]

Hi,

Browsersync is great, thanks for putting it together!

In the web server settings, it would be useful to have an "HTML5" mode for single page apps.

Have a look here to see what I mean (search "html5Mode in the readme"): https://github.com/schickling/gulp-webserver

Any plan to support this soon?

Thanks!

[shakyShane]

This can be easily added via middleware. Please review previous conversations here https://github.com/BrowserSync/browser-sync/issues/204

tl;dr

var historyApiFallback = require('connect-history-api-fallback')
var bs = require('browser-sync').create();

bs.init({
   server: {
       baseDir: "./app",
       middleware: [ historyApiFallback() ]
    }
})

[pensierinmusica]

Hi @shakyShane, thanks for your help! The solution you propose doesn't work though when you try to navigate to a resource without using the hashbang mode.

For example, navigating to localhost:3000/#/profile works fine.

Navigating to localhost:3000/profile tries instead to fetch the profile file from server and returns Cannot GET /profile.

If the direct resource is not present the server needs to always serve index.html.

This is exactly what the gulp-webserver option I pointed to in the previous post does:

gulp.task('webserver', function() {
  gulp.src('app')
    .pipe(webserver({
      fallback: 'index.html'
    }));
});

Looking forward to hear your insight, thanks!

[shakyShane]

That's exactly what the middleware does. It's how the Browsersync UI works also.

See https://github.com/BrowserSync/recipes/tree/master/recipes/server.middleware

[pensierinmusica]

I finally found out where the problem lied. I omitted the baseDir option, thinking it would take the local path as default, since my index.html was in the root folder. Instead it looks like it needs to be specified. Possibly to avoid similar inconveniences in the future the default for baseDir could become ./.

Any thoughts? Cheers :)