152

I've created a React app using create-react-app but whenever I start the dev server (using npm start), it opens up my browser. I want to make it so that it doesn't open my browser whenever I start my dev server.

How can I accomplish this?

Bassem
  • 3,582
  • 2
  • 24
  • 47
GSP KS
  • 1,783
  • 2
  • 5
  • 9

5 Answers5

262

Create .env file in the root directory where your package.json file resides. And add the following:

BROWSER=none

Now run npm start.

Tomerikoo
  • 18,379
  • 16
  • 47
  • 61
  • 1
    Is this documented anywhere? It seems 'react-scripts' has no documentation at all. – Jeffrey Drake Jul 25 '21 at 06:59
  • It seems sometimes react-scripts misses the .env file, so in your `package.json`, you can add `"start": ". ./.env; react-scripts start"` – Luke Miles Aug 03 '21 at 14:51
  • Note that the default .gitignore does not ignore .env. It does ignore .env.local, so perhaps that is a better filename. – Ders Oct 09 '21 at 04:05
  • 1
    @JeffreyDrake It's documented [here](https://create-react-app.dev/docs/advanced-configuration/). – Nipuna May 29 '22 at 07:13
  • 5
    If you are using **Windows** go to `packaga.json` file and right after `"scripts": {` replace `"start": "react-scripts start",` with `"start": "env BROWSER=none react-scripts start",` – Bushra Mustofa Sep 03 '22 at 00:40
  • @BushraMustofa Does not work on windows for me (`'env' is not recognized as an internal or external command, operable program or batch file.`). The `.env` file based approach works for me on Windows. – Ini Oct 30 '22 at 01:36
  • My answer above will work on `Git Bash` on windows os – Bushra Mustofa Nov 14 '22 at 06:55
98

Add BROWSER=none to your npm start script in your package.json file, like this:

"scripts": {
  "start": "BROWSER=none react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

Check out the CRA documentation for more configuration and environment variable options:

https://create-react-app.dev/docs/advanced-configuration/

Update/Troubleshooting:

In case you're having a 'BROWSER' is not recognized as an internal or external command, operable program or batch file error: do an npm install of cross-env: 

npm install --save cross-env

Then, add cross-env BROWSER=none to your start script

"start": "cross-env BROWSER=none react-scripts start",
Bassem
  • 3,582
  • 2
  • 24
  • 47
  • 2
    If you don't want to install `cross-env` globally, just add `cross-env` to your devDependencies and use `"start": "npx cross-env Browser=..."` – Jthorpe Apr 25 '22 at 20:40
17

For Windows you can edit/create a script in package.json like this one. There must be no blank before the &&:

"start": "set BROWSER=none&& react-scripts start"

For Linux based OS, just delete the "set" and the "&&" and it will work:

"start": "BROWSER=none react-scripts start"
Welcor
  • 2,431
  • 21
  • 32
Frank Garcia
  • 171
  • 1
  • 2
7

I suggest doing it at the command level, so you don't have to change any files that get committed.

BROWSER=none npm start

You can add an alias for this to your shell's configuration:

alias myapp-start='cd /path/to/myapp && BROWSER=none npm start'
Benjamin Atkin
  • 14,071
  • 7
  • 61
  • 60
1

If you have InteliJ IDEA you can also on the top right menu click your npm start and Edit Configurations, then in the Environment write:

BROWSER=none

Of course it will be right there only if you clicked on it in package.json at least once.

mdabrowski
  • 46
  • 6