← coderrocketfuel.com

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:

"scripts": {
  "start": "BROWSER=firefox react-scripts start"
},

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 script in your package.json file would look like this:

"scripts": {
  "start": "BROWSER=none react-scripts start"
},

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.