browserSync's modRewrite does not work for angularjs html5mode for path 'app/index.html' with gulp

Question

When I running gulp, the server started with message: cannot get /. When I point to localhost:3000/app/index.html, the site redirect to localhost:3000/home and work correctly. However, when I reload the page, it gives: cannot get /home.

Please review the following config to see if anything missed:

Path to access: app/index.html

This is my gulpfile.js:

var gulp = require('gulp'),
nodemon = require('gulp-nodemon'),
jshint = require('gulp-jshint'),
browserSync = require('browser-sync')
modRewrite  = require('connect-modrewrite');

gulp.task('lint', function () {
  gulp.src('app/js/*.js').pipe(jshint());
});

gulp.task('serve', function() {
  browserSync({
      server: {
          baseDir: "./",
          middleware: [
              modRewrite([
                  '!\\.\\w+$ /index.html [L]'
              ])
          ]
      }
  });
});

gulp.task('default', ['lint', 'serve'], function() {
  gulp.watch('app/js/*.js', ['lint', browserSync.reload]);
});

angular route file:

  $urlRouterProvider.otherwise("/home");

  $stateProvider
    .state('home', {
      url: "/home",
      templateUrl: "app/partials/home.html",
      controller: 'HomeCtrl'
    })
...

Thanks a lot!

Github: https://github.com/yhjor1212/angular-fire-powder

Answer 1

Use this code inside modRewrite:

['^([^.]+)$ /index.html [L]']

Example:

gulp.task('serve', function() {
  browserSync({
      server: {
          baseDir: "./",
          middleware: [
              modRewrite(['^([^.]+)$ /index.html [L]'])
          ]
      }
  });
});