CODEWITHSUNDEEP
javascriptnode.jswindowsnpm
Osama Qarem
Osama Qarem

Reputation: 1459

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

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?

Upvotes: 115

Views: 157153

Answers (18)

Archangel
Archangel

Reputation: 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

Upvotes: 0

Abbe
Abbe

Reputation: 1856

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.

Upvotes: 98

mrpaz
mrpaz

Reputation: 83

In Windows cmd, set env variable for desired browswer:

set BROWSER=chrome

Then just run npm start like normal

Upvotes: 5

Daniel Montecillo
Daniel Montecillo

Reputation: 271

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"
  }

Upvotes: 0

brunshte
brunshte

Reputation: 321

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?

Upvotes: 1

UTKARSH SINHA
UTKARSH SINHA

Reputation: 241

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.

Upvotes: 24

dkocich
dkocich

Reputation: 221

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.

Upvotes: 1

developerrakib
developerrakib

Reputation: 49

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"

Upvotes: 3

Debojyoti Chatterjee
Debojyoti Chatterjee

Reputation: 388

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.

Upvotes: 4

Ankit Tiwari
Ankit Tiwari

Reputation: 4710

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

Upvotes: 2

mohammad
mohammad

Reputation: 131

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!

Upvotes: 7

Uche Igbokwe
Uche Igbokwe

Reputation: 49

This is how I solved mine:

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

Upvotes: 1

n0noob
n0noob

Reputation: 939

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"

Upvotes: 60

daGo
daGo

Reputation: 2968

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.

Upvotes: 6

Vlad
Vlad

Reputation: 6730

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

BROWSER="firefox developer edition"

Upvotes: 28

Srinivasan N
Srinivasan N

Reputation: 683

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.

Upvotes: -1

lem
lem

Reputation: 13

Add script to your package.json file

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

Upvotes: -2

Narendra Solanki
Narendra Solanki

Reputation: 1202

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!

Upvotes: 0

Related Questions