BrowserSync modRewrite not working for angularjs html5mode for path 'app / index.html' with gulp

Question

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

Read the following configuration to see if something is missing:

Access Path: 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]']) ] } }); }); 

Answer 2

Sorry, I don’t know about gulp, but with Gruntfile.js I fixed a piece of middleware with the modRewrite module, for example:

 var modRewrite = require('connect-modrewrite'); ... grunt.initConfig({ ... browserSync: { ... options: { server: { middleware: [ modRewrite(['!\.html|\.js|\.css|\.png$ /index.html [L]']) ] } } ... 

Works great!