Using 'browser-sync' and 'connect-modrewrite'

I am working on a angular.js app. My problem is when working locally, when I refresh my URL i get Cannot GET / when a page is refreshed other than the index.html etc.

My problem is solved on my production server using:

<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(.*) /index.html [NC,L]
</IfModule>

However I’d like a solution which works with gulp, locally. I have read you can use ‘connect-modrewrite’ like so:

gulp.task('browser-sync', function() {
browserSync({
    server: {
        baseDir: outputDir,
    middleware: function() {
        return [
            modRewrite([
                '^/api/v1/(.*)$ http://localhost:3000/api/v1/$1 [P]'
            ])
        ];
    }
    }
});
});

The above doesn’t work, so I assume its incorrect. Am I way off?

[FadelChafai]

Hi,

You can use : connect-modrewrite

npm install --save-dev connect-modrewrite

and in your gulpfile.js :

..........................
var modRewrite  = require('connect-modrewrite');
..........................
gulp.task('serve', function () {
    browserSync.init(null, {
        server: {
            baseDir: ['.tmp', 'app'],  
            middleware: [
                modRewrite([
                    '!\\.\\w+$ /index.html [L]'
                ])
            ]
        }
    });

    gulp.watch(['app/**/*.html'], reload);
    gulp.watch(['app/styles/**/*.{scss,css}'], ['styles', reload]);
    gulp.watch(['app/scripts/**/*.js'], ['jshint']);
    gulp.watch(['app/images/**/*'], reload);
});

....

[matinfo]

@FadelChafai Thanks worked perfectly locally with AngularJS ui-Router with $locationProvider.html5Mode(true);