react-scripts start in specific browser

During my early stages of learning react, a specific thing bugged me the most. Whenever I used to run the react project on my local system, it would launch in the system default browser.
Now I am a kind of person who likes to use a lot of different products and learn what each has to offer. For example, right now in my system I have the following browsers installed:

• Google Chrome (The reliable son).
• Firefox
• Firefox Developer Edition
• Vivaldi

I also tried Brave Browser and Yandex Browser and bumped into Opera Neon while writing this. I am gonna try that one later.

Okay, coming back to the problem statement. I always wanted to run the react script and be able open on a specific browser or not open at all. Let me choose which browser I want to hit the localhost.

I am sure many of the developers in their beginning stage want the same too.

Recently there's another thing I have noticed that if you restart your script React used to reconnect to an existing tab instance on the browser but now it will open another new tab every time.

By default, Create React App will open the default system browser, favouring Chrome. Alternatively you can set the BROWSER variable to prevent this behaviour. Now let me tell you quickest 3 ways you can override this:

1. Setting an environment variable:

Open up your terminal window and set a shell variable as following:

$ BROWSER=none

Now you just need to export this variable to make it an environment variable:

$ export BROWSER

Check if the environment variable has been set properly:

$ printenv BROWSER

The above should return none. Now you can hit a npm start or yarn start to run your project without launching any browser.
One drawback of this is you have to set the environment variable every time in a new instance of the terminal.

2. Create a .env file:

In your project folder where the file package.json exists, create a file and name it .env. This is your environment file where you can set some environment variables for your specifically project.
Within this file add the line:

BROWSER=none

And, we're done. Run the script to start your project and no browser should pop up.
(You can also configure other variables like HOST, PORT as per your need. Find out more about Advanced Configuration)

3. Modify the start script:

In you package.json file you can update the scripts section and change the 'start' script as following:

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

You are basically letting React know that there is no default browser set on every time you run the start script, so it does not open your application in any browser.

4. Happy go Typy:

If you do not want to make changes in the package.json file or add a .env file, you can set the BROWSER variable every time you run the react using the package manager of your choice:

$ BROWSER=none npm start

OR

$ BROWSER=none yarn start

If you want to open in a specific browser, replace the none with firefox, vivaldi, google-chrome-stable or any browser of your choice.

Well, that's how you do it. Hope this helps you, please add comments in the post if you see something is not right or could be explained better. I am gonna go check that Opera Neon. Have a good day!

Comments

[Jeff Tillwick]

This no longer works in react-scripts 5.x

[Jeff Tillwick]

Also, step 3 does not work.

$ BROWSER=firefox react-scripts --max_old_space_size=4096 start
'BROWSER' is not recognized as an internal or external command,
operable program or batch file.

[Sopsss]

U could try by adding cross-env infront

Example: cross-env BROWSER=firefox react-scripts .......

cross-env can be installed by running: npm install cross-env