BrowserSyncでSPAのURLを直接たたいても404にならないようにする

2020.12.13

ローカル環境でSPAの開発をしていると、直接URLをたたいたり、リロードしたりすると404が返ってきます。
index.htmlをリロードすると問題ないですが、 /item/ などのURLを叩くと、SPAの場合そこにはディレクトリもファイルもないので当然そうなります。
そうすると、変更のたびにindex.htmlからリンクを辿っていかなくてはならず面倒です。

それらを普段開発に使っている Laravel Mix と BrowserSync に、ミドルウェアの connect-history-api-fallback を加えてリクエストを処理していきます。

connect-history-api-fallbackのインストール

npm install --D connect-history-api-fallback

ライブラリをインポート

const historyFallback = require('connect-history-api-fallback');

BrowserSyncの設定

mix.browserSync({
    server: 'public',
    proxy: false,
    files: [
        'public/**/*.html',
        'public/common/js/*.js',
        'public/common/css/*.css',
    ],
    middleware: [
        historyFallback()
    ]
})

参考

connect-history-api-fallback - npm