仕事でNode.jsのExpressを使う案件があり、オートリロード機能を持たせた快適ローカル開発環境を構築したのでメモしておく。

必要なパッケージのインストール

使用するパッケージをnpmでインストールする。

1
npm install --save-dev browser-sync nodemon npm-run-all

各種設定ファイルの調整

まずはBrowserSyncの設定ファイルから。

1
npx browser-sync init

上記コマンドを実行すると、bs-config.jsというファイルが作られる。
このファイルを以下のように編集する。

01
02
03
04
05
06
07
08
09
10
11
12
// 監視対象のファイル拡張子
"files": [
  "**/*.js",
  "**/*.css",
  "**/*.html"
],
 
// express側のポート
"proxy": "http://localhost:3000",
 
// BrowserSync側のポート
"port": 4000,

次にpackage.jsonを以下のように編集する。

1
2
3
4
5
"scripts": {
  "start": "npm-run-all --parallel start:*",
  "start:nodemon": "nodemon server.js",
  "start:sync": "browser-sync start --config bs-config.js"
},

3行目で指定したserver.jsはExpressの起動ファイル。
環境に応じて変更する必要がある。

ここまでの設定が完了したら、npm startコマンドを実行しhttp://localhost:4000へアクセスする。

ローカルサーバー上でExpressが起動し、bs-config.jsで指定した監視対象ファイルを更新するとブラウザがオートリロードされるはずだ。