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?

Possible duplicate of [How to use nodejs to open default browser and navigate to a specific URL](https://stackoverflow.com/questions/8500326/how-to-use-nodejs-to-open-default-browser-and-navigate-to-a-specific-url) — Mark C., Aug 07 '18 at 01:53
@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"](https://i.imgur.com/j8DLTWU.png). 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? — Osama Qarem, Aug 08 '18 at 02:39
You can also use `opn http://localhost:3000 -- 'google chrome'` with `opn-cli` https://github.com/sindresorhus/opn-cli — NoobTW, Aug 08 '18 at 03:07
shall we edit the question title to mention 'create-react-app'? — dcorking, Dec 13 '19 at 11:57
@dcorking Didn't realize I could edit the title. Changed, thanks! — Osama Qarem, Dec 14 '19 at 14:29
@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). — Eliran Malka, Dec 22 '21 at 21:39
@MarkC. - yes, i tend to get nostalgic like that :) JK i didn't notice.. — Eliran Malka, Dec 23 '21 at 00:42

Abbe · Accepted Answer · 2018-10-25T10:16:57.297

80

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.

edited Oct 25 '18 at 10:16

answered Aug 08 '18 at 03:11

Abbe

1,603
1
23
30

2

The link to the advanced configuration docs has since changed. It is now https://facebook.github.io/create-react-app/docs/advanced-configuration – Osama Qarem Oct 25 '18 at 08:41
7

Because I wasted a bunch of time on it, for OS X: BROWSER="google chrome" – sshevlyagin Nov 22 '18 at 11:58
@sshevlyagin The second quote says exactly that. – Abbe Nov 22 '18 at 14:29
@Abbe sorry, I thought when I tried it I needed the quotations around google chrome. Looks like I don't. – sshevlyagin Nov 23 '18 at 00:41
1

On Mac, You can also set it to Chrome Canary via `BROWSER=google chrome canary` – Darren Alfonso Jun 20 '19 at 17:19
1

For those who are using linux set default browser like this : ```BROWSER=google-chrome-stable``` – n0noob Jan 23 '20 at 15:34
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. – Rörd May 14 '20 at 13:52
Use chromium with this: `BROWSER=chromium-browser` – Ehsan88 Mar 01 '21 at 18:38
1

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 Mar 17 '21 at 11:41

n0noob · Answer 2 · 2020-01-23T16:00:13.170

46

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"

edited Jan 23 '20 at 16:00

answered Jan 23 '20 at 15:52

n0noob

753
6
22

7

I think the Windows syntax is wrong. I get `'BROWSER' is not recognized as an internal or external command, operable program or batch file.` – Ron Inbar Jun 22 '20 at 17:46
2

@RonInbar Probably you need to specify full path of your `chrome` executable in windows. – n0noob Jul 05 '20 at 14:41
1

With remote debugging enabled: `"start": "BROWSER='google chrome' BROWSER_ARGS='--remote-debugging-port=9222' react-scripts start"` – zrkl Aug 18 '21 at 15:25
1

This worked great. Thanks. – Nunchuk Feb 02 '22 at 22:03
1

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 ? – brunshte Apr 13 '22 at 21:04

score 23 · Answer 3 · answered Aug 01 '19 at 20:50

23

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

BROWSER="firefox developer edition"

answered Aug 01 '19 at 20:50

Vlad

5,633
1
59
67

4

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 – gkri Aug 30 '19 at 08:27
4

It's a rather personal preference, so you might want to add it to `.env.local` (which is ignored by git) – Rahel Lüthy Apr 14 '20 at 07:38
Simple working solution, working with macOS catalina – Feras Sep 05 '20 at 04:29
`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. – Romain Champourlier Jan 13 '21 at 16:39

score 22 · Answer 4 · edited Dec 01 '21 at 19:31

22

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.

edited Dec 01 '21 at 19:31

SherylHohman

14,460
16
79
88

answered Mar 23 '20 at 06:31

UTKARSH SINHA

221
2
2

9

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 – ni8mr Oct 13 '20 at 12:39
I am on `Ubuntu 20.04` and the following worked for me in `package.json` `"start": "BROWSER=chromium node scripts/start.js",` – Edgar Manukyan Jan 31 '21 at 18:08
@EdgarManukyan no wonders, but OP is tagged `windows` – sKopheK Mar 17 '21 at 11:42
This was the only solution that worked for me on Windows running VS Code. – kenswdev Nov 02 '21 at 16:18
Installation was OK but still opening Microsoft Edge here.... :( – Marcelo Luz Mar 18 '22 at 14:35

score 5 · Answer 5 · answered Apr 17 '21 at 00:38

Simply add the env-cmd package as global

then create a .env file and write a variable with a specific Browsers path after that add the env-cmd just in your start script

in the terminal

npm install -g env-cmd

in the .env file

BROWSER= "your browser path"

like => BROWSER= "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Microsoft Edge"

in the package.json add the env-cmd

"scripts": {
   "start": "env-cmd react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
}

that should work!

score 4 · Answer 6 · answered Sep 12 '19 at 21:03

4

In Windows cmd, set env variable for desired browswer:

set BROWSWER=chrome

Then just run npm start like normal

answered Sep 12 '19 at 21:03

mrpaz

73
4

daGo · Answer 7 · 2019-11-26T09:44:24.263

4

I don't like to repeatedly create a new .env file or prepend npm start every time with an additional command. You can specify your browser of choice instead of none in your shell config file. Type in your terminal the following commands:

echo export BROWSER=none >> ~/.bashrc
source ~/.bashrc

At this point you can run npm start and be happy.

edited Nov 26 '19 at 09:44

answered Nov 26 '19 at 08:30

daGo

2,140
21
21

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. – Ken Ingram Feb 15 '21 at 04:19

score 2 · Answer 8 · answered May 04 '21 at 14:37

2

for Brave browser it is BROWSER=brave-browser npm start

answered May 04 '21 at 14:37

Ankit Tiwari

3,333
3
9
31

score 2 · Answer 9 · edited Sep 03 '21 at 15:57

2

Change your default Browser setting in windows, if it does not work then open your visual studio code and change the script browser to:

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

edited Sep 03 '21 at 15:57

RobC

20,007
20
62
73

answered Sep 03 '21 at 14:09

developerrakib

21
2

I was trying to change settings on package.json file until I realized this simple solution. – Abdulhakim Oct 14 '21 at 12:01

score 1 · Answer 10 · answered Aug 08 '18 at 06:09

1

There is one package called set-default-browser https://www.npmjs.com/package/set-default-browser

just download package from there and add following code

var setDefaultBrowser = require('set-default-browser');

setDefaultBrowser("chrome");

Or you can just run this set-default-browser chrome

Thanks!

answered Aug 08 '18 at 06:09

Narendra Solanki

868
12
20

2

This packages aims at changing the default OS browser (that is not the question). – mtone Jun 29 '19 at 20:38

score 1 · Answer 11 · edited Jun 27 '20 at 16:42

1

This is how I solved mine:

I opened the application on vsCode, then via the terminal I ran "BROWSER=Chrome npm start".

edited Jun 27 '20 at 16:42

dippas

52,735
15
110
120

answered Jun 27 '20 at 15:56

Uche Igbokwe

31
3

score 1 · Answer 12 · answered May 04 '21 at 18:52

If you want to change the default browser when you are running a npm start or yarn start, the simplest way to do that is edit your package.json file.

Many are not comfortable dealing with environment variables using the terminal.

This is what your scripts section should look like:

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

In the above scenario it would not open any browser at all, you are free to choose your development browser and continue your work(I prefer this one). However, if you want a specific browser then you can replace BROWSER=none with any of the following:

BROWSER=firefox
BROWSER=google-chrome-stable
BROWSER=vivaldi

Suit yourself.

score 1 · Answer 13 · answered Nov 01 '21 at 08:30

on windows, the easies way with create-react-app was to add BROWSER="C:\Program Files\Google\Chrome Dev\Application\chrome.exe" to my .env.developmennt.local file in each CRA project. I use a different browser without dev extensions as the default one set in the system.

score 0 · Answer 14 · answered Apr 16 '22 at 22:56

On Mac, this method:

"start": "BROWSER='firefox developer edition' react-scripts start"

works on 'react': '17.0.1' together with 'react-scripts': '4.0.1'

But it is not working on 'react': '18.0.1' together with 'react-scripts': '5.0.1'.

On 18.0.1 it continues to open in the default browser set on my computer. So I have sometimes reverted back to using the older React version but do not want to continue doing this as I do need the newer version in some cases and it's just easier to install the most recent version using create-react-app.

Any suggestions?

score -1 · Answer 15 · edited Mar 25 '19 at 12:08

-1

To open in chrome we need to set it as a default browser.

Setting --> Default browser --> Make default -->

and choose chrome if any other browser is chosen.

It worked on windows 10.

edited Mar 25 '19 at 12:08

wscourge

9,289
12
51
72

answered Mar 25 '19 at 11:45

Srinivasan N

613
8
8

2

Asker specifically said he doesn't want to change their default browser. – JakeRobb Jul 14 '21 at 18:23

score -2 · Answer 16 · answered Dec 15 '18 at 21:30

-2

Add script to your package.json file

"devserver": "live-server --browser=Chrome"

answered Dec 15 '18 at 21:30

lem

13
3

I guess the answer is that it doesn't seem to work and I can't see any documentation on this solution. – Ross Attrill Dec 23 '19 at 01:21

score -2 · Answer 17 · answered Jan 24 '20 at 15:28

-2

If you are a Windows user then go to Sitting -> Default apps -> Web browser then select your desired browser.If you are a Linux user then go to System-settings -> Details. (Note: In older versions of Ubuntu Details is called System Info)

answered Jan 24 '20 at 15:28

Gk Mohammad Emon

4,390
2
35
34

3

Asker specifically said he doesn't want to change their default browser. – JakeRobb Jul 14 '21 at 18:22

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

17 Answers17

Linked