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

[antonioOrtiz]

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);
});

....

[shakyShane]

@FadelChafai thanks :)

You can also use this https://github.com/bripkens/connect-history-api-fallback

[antonioOrtiz]

Hey FadelChafai, thanks!

However I get this error:

This is just from my gulpfile.js for reference...

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

gulp.watch(['builds/development/**/*.html'], reload);
gulp.watch([sassSources], ['css', reload]);
gulp.watch([jsSources], ['scripts']);
gulp.watch(['builds/development/images/**/*.*'], reload);
});

This is the error output from the term:

module.js:340
throw err;
^
Error: Cannot find module './utils'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/Users/antonioortiz/Sites/rusty-stark-website/node_modules/connect-modrewrite/node_modules/qs/lib/parse.js:3:13)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
   at Module.require (module.js:364:17)

[maks-rafalko]

@FadelChafai it does not work for me, too

[Bomavi]

@FadelChafai thanks, it works perfectly!

[matinfo]

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