nodemonとBrowserSyncでExpressの快適開発環境を構築する方法

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

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

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

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

各種設定ファイルの調整

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

npx browser-sync init

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

// 監視対象のファイル拡張子
"files": [
  "**/*.js",
  "**/*.css",
  "**/*.html"
],

// express側のポート
"proxy": "http://localhost:3000",

// BrowserSync側のポート
"port": 4000,

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

"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で指定した監視対象ファイルを更新するとブラウザがオートリロードされるはずだ。