create-react-app起動時のブラウザ自動オープンをオフにする方法
2022.12.9
この記事は約1分で読めます

この記事の筆者:三好アキ
🟢 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。
🟢『はじめてつくるReactアプリ with TypeScript』、『動かして学ぶ!Next.js/React開発入門(翔泳社/*韓国でも出版)』著者。
▼ Amazon著者ページはこちら
amazon.co.jp/stores/author/B099Z51QF2
ブラウザ立ち上げをオフにするコード
React開発のひな型create-react-app
は非常に便利ですが、しばらく開発作業をしていると不要だと感じる機能があります。
npm start
コマンドで起動した時にブラウザが勝手にオープンする機能です。
これを防止するにはBROWSER=none
というコードをpackage.json
に追加しましょう。
// package.json
{
"name": "monotein",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "BROWSER=none react-scripts start", // 追加
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...
これでnpm start
でReactを起動してもブラウザが自動でオープンせず、手動でhttp://localhost:3000
を開くかたちになります。

🟩 フロントエンド開発者入門ガイド【無料配布中】
最初にこれが知りたかった!
フロントエンド初心者が必ず押さえておきたい ― 『挫折しない勉強法』とその具体的ステップ、無料配布中。
(*名前不要・メールアドレスだけで受け取り可能です)