Question

87

Can I tell browser-sync to always use one .html file? (for html5mode links)

rated 0 times [ 94] [ 7] / answers: 1 / hits: 6558 / 10 Years ago, sun, june 29, 2014, 12:00:00

I use browser-sync (https://github.com/shakyShane/browser-sync) in my gulp file for development purposes. I want to use html5mode within my angular app. For that server needs to route multiple url patterns to single html file. Staging and production servers already do that but I would also like to have this up and running during development.

Here is how I run browser-sync server (part of gulpfile.js):

gulp.task('serve', function () {

    browserSync.init(null, {

        server: {

            baseDir: [APP_PATH]

        }

    });



    // watch only for app specific codes;

    ...

});

Just to make it more clear, at my app js I instruct angular to use html5mode for routing:

$locationProvider.html5Mode(true);

Within my APP_PATH I have single index.html which is served when I access browser-sync server. What I need is that browser-sync serves this single file for each paths.

So for example if I try to reach /users/2 path starting from root path everything is fine; however if I refresh page or try to reach /users/2 directly, browser-sync tells that it cannot find proper document to serve - this is all good and understandable but I wonder if there is any way to tell browser-sync built-in server to serve one file only. If not, can anyone suggest other options? Should I simply run express server and tell browser-sync to proxy through it?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

helenat

Add To Favorites

Follow

Total Points: 450

Total Questions: 95

Total Answers: 97

Location: Central African Republic

Member since Mon, Aug 10, 2020

4 Years ago

helenat questions

1 How to make a Select element accessible if it has no label?

Fri, Oct 29, 21, 00:00, 3 Years ago

1 JSON.stringify key without quotes

Sun, Feb 7, 21, 00:00, 3 Years ago

1 Google Analytics: User does not have sufficient permissions for this profile

Wed, Nov 18, 20, 00:00, 4 Years ago

1 apexchart width overflows or doesn't strech

Tue, Sep 29, 20, 00:00, 4 Years ago

1 React Native FlatList re-renders the already rendered items when adding new data

Wed, Aug 5, 20, 00:00, 4 Years ago

View All

answered 10 Years ago iliana · Accepted Answer

You can use https://github.com/tinganho/connect-modrewrite.

var modRewrite  = require('connect-modrewrite');



gulp.task('serve', function () {

    browserSync.init(null, {

        server: {

            baseDir: [APP_PATH],

            middleware: [

                modRewrite([

                    '!\.\w+$ /index.html [L]'

                ])

            ]

        }

    });



   // watch only for app specific codes;

   ...

});