ViteにbrowserSyncを導入する

Viteで静的Webサイトを作りたかった＆browserSyncを導入したかったのですが、ネットに情報が載ってなかったので備忘録としてメモっておきます。

まずViteでプロジェクトは作ってある前提で、browserSyncとViteのbrowserSyncプラグインをインストールする。

npm install browser-sync vite-plugin-browser-sync

続いてvite.config.jsをいじります。
重要なところだけピックアップします。

import { networkInterfaces } from 'os'
import VitePluginBrowserSync from 'vite-plugin-browser-sync'

const ip = Object.values(networkInterfaces()).flat().find((i) => i.family === 'IPv4' && !i.internal)?.address

export default defineConfig({
  plugins: [
    VitePluginBrowserSync(),
  ],
  server: {
    host: host: ip ? ip : 'localhost',
  }
});

追加すべき必要なオプション項目はこの2点です。

• pluginsにVitePluginBrowserSync()を追記
• serverのhostにあなたの現在のIPアドレスを設定する

以下、補足説明。

• osパッケージはviteのプロジェクトならデフォルトで呼び出せるのでnpm installは不要
• const ip = Object.values...はあなたの現在のIPアドレスを取得します。console.logで中身見ると何が起きてるか確認できるでしょう
• IPアドレスを取得したらserverのhostに設定しますが、万が一IPアドレスの取得に失敗した場合はデフォルトの'loalhost'を設定するようにしておく

これでnpm run devを実行するとコマンドライン上に下記の様な表示がされます。

  ➜  Network: http://xxx.xxx.xxx.xxx:5173/
  ➜  BrowserSync - Local: http://localhost:3000/
  ➜  BrowserSync - External: http://xxx.xxx.xxx.xxx:3000/
  ➜  BrowserSync - UI: http://localhost:3002/
  ➜  BrowserSync - UI External: http://xxx.xxx.xxx.xxx:3002/

これでローカルサーバーが立ち上がります。NetworkのURLにアクセスしましょう。
同一ネットワークならどのデバイスからでもアクセス可。
ただ、localhost:3000はアクセスしてもなぜか表示されずタイムアウトされてしまった。理由わかる人いたら教えてほしいっす