Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 669
Osama Qarem Avatar asked Aug 06 '18 11:08

Osama Qarem


People also ask

Can I use npm With create React app?

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React. npx on the first line is not a typo — it's a package runner tool that comes with npm 5.2+.


2 Answers

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.

like image 81
Abbe Avatar answered Sep 18 '22 08:09

Abbe


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" 
like image 34
n0noob Avatar answered Sep 22 '22 08:09

n0noob