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?


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.


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"
    

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.


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

BROWSER="firefox developer edition"