Open Create-React-App In a Specific Browser
By default, Create-React-App will open your application with the default browser for your operating system when it initially starts. But what if you need to open your Create-React-App application in a specific browser on its initial start? Or what if you wanted to not open a browser at all?
Luckily, Create-React-App has a built-in way to control this. You can override the default browser setting with your own BROWSER=<name> environment variable in the scripts section of your package.json file.
Here is an example of what the environment variable looks like:
BROWSER=firefox
This will open your Create-React-App application in the Firefox browser when it starts up.
And it will look like this in your package.json file as a npm start script:
package.json
 
"scripts": {
  "start": "BROWSER=firefox react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},
Now when you run your application with the npm start command, you'll notice it opens in Firefox.
One thing to keep in mind is that each browser app name is dependent on the platform your operating system is on (macOS, Linux, Windows, etc.) and has the possibility of being different from platform to platform. Therefore, you shouldn't hard code it into your reusable modules.
For example, if you wanted to open your application using Google Chrome, the environment variable will be different depending on what operating system you're on:
  • macOS: BROWSER=google-chrome
  • Linux: BROWSER=google-chrome
  • Windows: BROWSER=chrome
Notice that the Windows environment variable is different from Linux and macOS. These small differences in names across operating systems could cause potential bugs and are something you should be aware of.
It can be annoying to have a browser window pop open everytime you start your application. So, you can also tell Create-React-App to disable the feature all together and have it not open any browser windows.
You can do this by setting the environment variable to:
BROWSER=none
And the scripts in your package.json file would look like this:
package.json
 
"scripts": {
  "start": "BROWSER=none react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},
When you start your application again with the npm start command, your application won't open in any browser.
Check out the Create-React-App documentation for more configuration and environment variable options.
Hopefully, this was helpful in your coding journey.
As always, thanks for reading and happy coding!
Have any questions or comments about this article? You can contact me via email at nick@coderrocketfuel.com or on Twitter at @CoderRocketFuel.
If you enjoyed this free content, please consider supporting what I do by Buying Me a Coffee.