create-react-app: How do I "npm start" with a specific browser?

Question

npm start

starts the react server on the default browser, which is Firefox for me. I like Firefox for browsing but prefer Chrome in web development for its developer tools. Is there a way to force "npm start" to start the server with Chrome, without changing my default browser to chrome? I am using Bash on Windows.

Edit: I used "create-react-app" to create my server and this adds a script to "packages.json" file for "npm start". The script starts the localhost server with the default browser. How do I modify the script added by "create-react-app" such that it starts with a different browser?

Solution 1

This is possible with the BROWSER environment variable.

You can also do it directly in the terminal: BROWSER=chrome npm start

This is described in the Advanced Configuration docs:

By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a browser to override this behavior, or set it to none to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to npm start will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the .js extension.

Also note that the browser names are different on different platforms:

The app name is platform dependent. Don't hard code it in reusable modules. For example, Chrome is google chrome on macOS, google-chrome on Linux and chrome on Windows.

Solution 2

As you have mentioned that you are using create-react-app for creating react app and you want chrome to open on hitting npm start. Set BROWSER variable in package.json present in your project in the following manner:

Replace:

"start": "react-scripts start"

With:

• Linux:

  "start": "BROWSER='google-chrome-stable' react-scripts start"
  

• Windows:

  "start": "BROWSER='chrome' react-scripts start"
  

• OS X:

  "start": "BROWSER='google chrome' react-scripts start"
  

Solution 3

Method by using .env file in the root of your NodeJS app.

BROWSER="firefox developer edition"

Solution 4

Using above technique, you may end up with error 'BROWSER' is not recognized as an internal or external command, operable program or batch file.

To over come this Do an npm install of cross-env in your cloned repo: npm install --save cross-env

Try to use this command in the package.json file

"start": "cross-env BROWSER=chrome react-scripts start"

BROWSER is an environment variable, and you can use the cross-env package to properly handle it.

Solution 5

In Windows cmd, set env variable for desired browswer:

set BROWSER=chrome

Then just run npm start like normal

View more solutions

Comments

[Mark C.]

Possible duplicate of How to use nodejs to open default browser and navigate to a specific URL

[Osama Qarem]

@MarkC. Sorry I didn't have a proper understanding of my problem before posting the question. I will explain what I want more properly now. I used "create-react-app" to create my server and this adds a script to "packages.json" file for "npm start". The script starts the localhost server with the default browser. How do I modify the script added by "create-react-app" such that it starts with a different browser?

[NoobTW]

Maybe you can spawn Google Chrome with your URL?

[NoobTW]

You can also use opn http://localhost:3000 -- 'google chrome' with opn-cli github.com/sindresorhus/opn-cli

[dcorking]

shall we edit the question title to mention 'create-react-app'?

[Osama Qarem]

@dcorking Didn't realize I could edit the title. Changed, thanks!

[Eliran Malka]

@MarkC. - it may be a duplicate in the technical low-level sense, but it's worth keeping this question for reference, as it serves the react.js community (where most of the time, the dev workflows are structured, boilerplate code exists, and other configuration related considerations arise as a result, like whether to eject a react app or not).

[Mark C.]

@EliranMalka this is a 3 year old thread...

[Eliran Malka]

@MarkC. - yes, i tend to get nostalgic like that :) JK i didn't notice..

[Osama Qarem]

The link to the advanced configuration docs has since changed. It is now facebook.github.io/create-react-app/docs/advanced-configurat‌​ion

[sshevlyagin]

Because I wasted a bunch of time on it, for OS X: BROWSER="google chrome"

[Abbe]

@sshevlyagin The second quote says exactly that.

[sshevlyagin]

@Abbe sorry, I thought when I tried it I needed the quotations around google chrome. Looks like I don't.

[Darren Alfonso]

On Mac, You can also set it to Chrome Canary via BROWSER=google chrome canary

[mtone]

This packages aims at changing the default OS browser (that is not the question).

[gkri]

This actually doesn't work for me (on a Windows machine currently), but using BROWSER="firefox" still opens Firefox Developer Edition so I guess I'm good

[Ross Attrill]

I guess the answer is that it doesn't seem to work and I can't see any documentation on this solution.

[n0noob]

For those who are using linux set default browser like this : BROWSER=google-chrome-stable

[Rahel Lüthy]

It's a rather personal preference, so you might want to add it to .env.local (which is ignored by git)

[Rörd]

I wanted to Firefox on the web, and I had to use BROWSER="/Applications/Firefox.app" to get that. Just BROWSER=firefox would startup Parallels instead.

[Ron Inbar]

I think the Windows syntax is wrong. I get 'BROWSER' is not recognized as an internal or external command, operable program or batch file.

[n0noob]

@RonInbar Probably you need to specify full path of your chrome executable in windows.

[Feras]

Simple working solution, working with macOS catalina

[ni8mr]

Just a correction: It is better if "cross-env" is installed as dev-dependencies. So better command would be to install the package: npm install --save-dev cross-env

[Romain Champourlier]

BROWSER=firefox developer edition works for me on Big Sur, though previously this was BROWSER=Firefox Developer Edition 🤔. Best try both. No quote nor full path did work.

[Edgar Manukyan]

I am on Ubuntu 20.04 and the following worked for me in package.json "start": "BROWSER=chromium node scripts/start.js",

[Ken Ingram]

That's what I was thinking. The requirement that I constantly have to add this variable every time I create a react project is unreasonable. At worst it should be a switch in the npm start.

[Ehsan88]

Use chromium with this: BROWSER=chromium-browser

[sKopheK]

OP is tagged windows which is also my case and as using powershell, the suggested solution is not applicable. .env file was the king in my case

[sKopheK]

@EdgarManukyan no wonders, but OP is tagged windows

[JakeRobb]

Asker specifically said he doesn't want to change their default browser.

[JakeRobb]

Asker specifically said he doesn't want to change their default browser.

[zirkelc]

With remote debugging enabled: "start": "BROWSER='google chrome' BROWSER_ARGS='--remote-debugging-port=9222' react-scripts start"

[Abdulhakim]

I was trying to change settings on package.json file until I realized this simple solution.

[kenswdev]

This was the only solution that worked for me on Windows running VS Code.

[Nunchuk]

This worked great. Thanks.

[Marcelo Luz]

Installation was OK but still opening Microsoft Edge here.... :(

[brunshte]

Not working in React 18.0.0. Is working in 17.0.1. Actually need "react": "^17.0.1", "react-scripts": "4.0.1" Any fixes for 18.0.0 ?

[Grim]

You have a typo, you wrote "BROWSWER" I changed it to "BROWSER".