Zenn
🖥️

[Nuxt.js]npm run dev実行時にブラウザを自動で立ち上げる

2024/12/16に公開
Nuxt
TypeScript
Vue.js
npm
フロントエンドエンジニア
tech

✒ はじめに(本記事のモチベ)

こんにちは、JSを勉強中のAK666です。
個人開発をしていて、毎回思うのが「npm run devしてローカル環境を開くのが面倒くさい！」ということです。

通常、ローカル環境を表示させるためには以下の流れを踏むと思います。

1.コマンドラインで npm run dev を実行
↓
2.ブラウザで http://localhost:ポート番号 を手動で入力
正直、この作業めんどくせー。上の工程省けないかなー。

そこで、npm run dev 実行時にブラウザが自動で開いてローカル環境を表示できる方法を見つけたので、皆様にも共有します。

⚙ 著者の開発環境

・Nuxt.js
・TypeScript

✒ Step1 「OPEN パッケージ」をインストール

👉OPEN パッケージとは

open パッケージは、Node.js アプリケーションから、システムのデフォルトアプリケーションを使ってファイルやURLを開くための便利なツール。このパッケージを利用すると、以下のような操作を簡単に実現できるっぽい。

  • ブラウザでURLを開く
  • システムのデフォルトのアプリケーションでファイルを開く
  • 特定のアプリケーションでファイルやURLを開く
    ...etc.

1.installコマンド実行

npm install open

2.package.json確認

installが正常に完了したら、package.json の dependencies セクションに追加されるので確認する。
以下、サンプル

{
  "dependencies": {
    "open": "^9.2.0"
  }
}

installが完了したらStep2へGo！！

✒ Step2 nuxt.cofig.tsにhooksを追加する

Nuxt.js の hooks 機能を活用して、開発サーバーが起動したとき（npm run dev時）にブラウザでローカル環境のURLを自動的に開くように以下のコードをnuxt.cofig.tsに設定する。

    hooks: {
    listen( { url = 'http://localhost:3000/' }) {
      open(`${url}`)
    },
  },

👉hooks オプション

Nuxt.js で提供されるフック機能。
Nuxt のさまざまなライフサイクル（サーバー起動、ビルド、アプリのレンダリングなど）にカスタム処理を追加可能。
hooks オブジェクトの中に特定のイベント名をキーとして登録することで、対応するライフサイクルイベントに処理を挿入できる。

参考資料 Lifecycle Hooksについて

👉listen hook

サーバーが起動した後に呼び出されるフック。
開発サーバー (npm run dev) がリクエストをリッスンする準備が整うと実行される。

  • 第一引数: サーバーのホスト名やポート、URL などの情報を持つオブジェクト。例えば { host, port, url } が含まれる。

✒ Step3 npm run dev実行


※実行後、Nuxtの公式HPが立ち上がるが、ビルドが完了するとローカル環境が表示されるので焦らずに待つ。

👉今後の課題(理想)

現状、npm run dev実行時に「必ず」ブラウザが自動起動されるので、特定のオプションが付いているコマンドを検知してブラウザが立ち上がるようにしたい。

例 ブラウザ立ち上げなし

npm run dev

例 ブラウザ立ち上げあり

npm run dev -o

特定のオプションでのみブラウザを起動したい理由

  • 複数のタスクを同時に進める場合、毎回ブラウザを開かれると作業が中断されてしまうことがあるから。

  • チームメンバーがそれぞれ異なるワークフローで作業している場合、ブラウザの自動起動を好む人もいれば、コマンドライン中心で作業したい人もいる。
    オプションで制御することで、全員のニーズを満たせる。

  • 開発環境で独自スクリプトやデバッグツールを使う場合、ブラウザの起動は邪魔になることがある。
    -o オプションを使うことで、ツールとスクリプトの動作を分離できる。

Discussion