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

score 93 · Accepted Answer · edited Sep 24 '22 at 17:46

93

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 Sep 24 '22 at 17:46

frandroid

1,343
16
26

answered Aug 08 '18 at 03:11

Abbe

1,765
1
22
34

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
10

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
CRA broke this when updating "open" library dependency. this PR fixes it, but still has not been merged https://github.com/facebook/create-react-app/pull/11878 – sKopheK Aug 06 '23 at 21:35

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

57

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

889
8
23

15

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
3

@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"` – zirkelc Aug 18 '21 at 15:25
1

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

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
Windows syntax depends on whether it is run from command line or powershell, but never correct as described here, for me `"start": "set \"BROWSER=firefox\" && react-scripts start"` did the trick, even if it wasn't supposed to work in powershell as stated [here](https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-temporary-environment-variables-in-your-shell) – cupiqi09 Jun 01 '23 at 09:47

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

27

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

BROWSER="firefox developer edition"

answered Aug 01 '19 at 20:50

Vlad

6,402
1
60
74

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 – 0xFK 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 24 · Answer 4 · edited Dec 01 '21 at 19:31

24

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

16,580
17
88
94

answered Mar 23 '20 at 06:31

UTKARSH SINHA

241
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
1

Installation was OK but still opening Microsoft Edge here.... :( – Marcelo Luz Mar 18 '22 at 14:35

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

6

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,584
26
24

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 6 · Answer 6 · 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 5 · Answer 7 · edited Jun 19 '22 at 08:25

5

In Windows cmd, set env variable for desired browswer:

set BROWSER=chrome

Then just run npm start like normal

edited Jun 19 '22 at 08:25

Grim

1,938
10
56
123

answered Sep 12 '19 at 21:03

mrpaz

83
1
4

score 3 · Answer 8 · answered May 04 '21 at 18:52

3

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.

answered May 04 '21 at 18:52

Debojyoti Chatterjee

368
2
7

Awesome! I hated how the script was opening Chrome automatically every time. I much prefer opening it myself, or using Visual Studio Code launch.json to open Chrome. – Chris Livdahl Mar 03 '23 at 04:10
if no browser is opened, how can I see the results i.e how to run it with my preferred broswer – Mahmoud Mabrok Apr 05 '23 at 12:57
You know which port you application is running!! just hit `http://localhost:` on the browser of your choice. – Debojyoti Chatterjee Apr 05 '23 at 15:31

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

3

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

22,977
20
73
80

answered Sep 03 '21 at 14:09

developerrakib

39
3

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

score 2 · Answer 10 · 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

4,438
4
14
41

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

58,591
15
114
126

answered Jun 27 '20 at 15:56

Uche Igbokwe

41
3

score 1 · Answer 12 · 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 13 · answered Aug 08 '18 at 06:09

0

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

1,042
14
20

2

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

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 0 · Answer 15 · answered Jun 17 '22 at 18:12

If you are using another browser like Brave, here is an example on how to modify the package.json file.

In Mac OS

  "scripts": {
    "start": "BROWSER='/Applications/Brave Browser.app' react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

score 0 · Answer 16 · edited Apr 25 '23 at 14:41

Each approach described in this thread failed for me for NPM version 8.15.0 on Debian 11.

Context

The root cause was never determined, but BROWSER=/usr/bin/chromium npm start, with or without absolute path, always resulted the default browser (Firefox) being opened. However, BROWSER=none resulted in no browser being opened -- the expected outcome -- which suggests the variable is acknowledged but is being ignored. Seems likely related to this GitHub issue.

Workaround: `BROWSER=node_script.js`

Per the documentation, BROWSER can point to an arbitrary JS script:

...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.

Procedure

These were the steps followed to implement the workaround.

1. Create/save a script to disk (`chromium.js`):

The following is a valid script for Chromium on Debian Linux:

const { exec } = require("child_process");

const cmd = '/usr/bin/chromium ' +
    '--disable-web-security ' +
    '--user-data-dir=/tmp/chromium-npm-dev ' +
    process.argv[process.argv.length-1]

exec(cmd, (error, stdout, stderr) => {
    if (error) {
        console.log(`error: ${error.message}`);
        return;
    }
    if (stderr) {
        console.log(`stderr: ${stderr}`);
        return;
    }
    console.log(`stdout: ${stdout}`);
});

Notes:

cmd must be updated to suit relevant needs.
I found it easiest to save it in the root of the NPM project.

2. Start NPM

BROWSER=chromium.js npm start

score -1 · Answer 17 · 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

10,657
14
59
80

answered Mar 25 '19 at 11:45

Srinivasan N

733
8
9

3

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

score -2 · Answer 18 · 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

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

18 Answers18

Context

Workaround: `BROWSER=node_script.js`

Procedure

1. Create/save a script to disk (`chromium.js`):

2. Start NPM

Linked

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

18 Answers18

Context

Workaround: BROWSER=node_script.js

Procedure

1. Create/save a script to disk (chromium.js):

2. Start NPM

Linked

Workaround: `BROWSER=node_script.js`

1. Create/save a script to disk (`chromium.js`):