blog-hero-img

create-react-app起動時のブラウザ自動オープンをオフにする方法

pen-icon2022.12.9

この記事は約1分で読めます

Profile Pic

この記事の筆者:三好アキ


🔹 Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』著者。

🔹 自身のJavaScript挫折経験をもとに、HTMLとCSSの知識だけで本格的なアプリ開発を始められる入門書を多数執筆中。合計著作は22冊を超える。

🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。


Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2



React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて無料配信中。登録はこちらから → 無料メルマガ登録

ブラウザ立ち上げをオフにするコード

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を開くかたちになります。

Profile Pic

メルマガ配信中
(from 三好アキ/エンジニア)


React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
(*配信はいつでも停止できます)