Expressに自動でブラウザ更新する機能を追加してみた件
- 2020.06.28
- Javascript NodeJs
ファイル更新が完了したタイミングで自動でサーバーが更新されるように設定したいと思います。
npmのパッケージnodemonとbrowser-sync使用し設定を進めていきます。
browser-syncはソースコードの変更を監視し変更があった場合にブラウザをリロード。nodemonはソースを監視して、自動でサーバーを再起動してくれるパッケージです。インストールのコードは以下になります。
npm install nodemon browser-sync
まずはbrowser-syncの設定を行います。以下のコードを実行してください。
npx browser-sync init
bs-config.jsというファイルが作成されます。作成されたファイルに以下の設定を追加します。
"files": [ "**/*.js", "**/*.css", "**/*.html", "**/*.ejs" ], "proxy": "http://localhost:3000", "port": 4000
次にbrowser-syncとnodemonのコマンドをpackage.jsonにタスクとして設定していきます。package.jsonのscriptsに以下のコードを登録します。
"start:nodemon": "nodemon app.js", "start:sync": "browser-sync start --config bs-config.js"
登録したタスクを実行します。
タスクの実行のためにnpm-run-allというパッケージをインストールします。
npm install npm-run-all
package.jsonのscriptsに以下のコードを追加します。
"start": "npm-run-all --parallel start:*",
最後にnpm run startコマンドで実行するとブラウザが立ち上がりejsやapp.jsファイルの更新に合わせて自動でリロードや更新が走るようになりました。
-
前の記事
NodeJsのExpressを使ってみた件 2020.06.25
-
次の記事
MySQLをインストールしてみた件 2020.06.28