Могу ли я сообщить браузеру-синхронизации, чтобы всегда использовать один .html файл? (для ссылок html5mode)

Я использую browser-sync (https://github.com/shakyShane/browser-sync) в файле gulp для целей разработки. Я хочу использовать html5mode в моем приложении angular. Для этого сервера необходимо перенаправить несколько шаблонов url в один файл html. Серверы этапов и производства уже делают это, но я бы также хотел, чтобы это было запущено во время разработки.

Вот как я запускаю сервер browser-sync (часть gulpfile.js):

gulp.task('serve', function () {
    browserSync.init(null, {
        server: {
            baseDir: [APP_PATH]
        }
    });

    // watch only for app specific codes;
    ...
});

Чтобы это стало яснее, в моем приложении js я инструктирую angular использовать html5mode для маршрутизации:

$locationProvider.html5Mode(true);

В моем APP_PATH у меня есть единственный index.html, который подается, когда я обращаюсь к серверу browser-sync. Мне нужно, чтобы browser-sync обслуживал этот единственный файл для каждого пути.

Так, например, если я пытаюсь достичь пути /users/2, начиная с корневого пути, все в порядке; однако, если я обновляю страницу или пытаюсь напрямую связаться с /users/2, browser-sync говорит, что не может найти правильный документ для обслуживания - все это хорошо и понятно, но мне интересно, есть ли способ сказать встроенный сервер browser-sync для подачи только одного файла. Если нет, может ли кто-нибудь предложить другие варианты? Должен ли я просто запустить экспресс-сервер и сообщить browser-sync прокси-серверу через него?

Ответы

Ответ 1

Вы можете использовать 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;
   ...
});

Ответ 2

Из https://github.com/BrowserSync/browser-sync/issues/204#issuecomment-102623643

Сначала установите connect-history-api-fallback:

npm --save-dev install connect-history-api-fallback

Затем добавьте его в свой файл gulpfile.js:

var historyApiFallback = require('connect-history-api-fallback');

gulp.task('serve', function() {
  browserSync.init({
    server: {
      baseDir: "app",
      middleware: [ historyApiFallback() ]
    }
  });
});