How to disable open browser in CRA?

How to Disable Open Browser in Create React App (CRA)?

If you are using Create React App (CRA) for your JavaScript project, you might have noticed that by default, it opens a new browser tab whenever you start the development server. While this behavior can be useful in some cases, there are situations where you may want to disable this automatic browser opening. In this blog post, we will explore two different solutions to achieve this.

Solution 1: Using the BROWSER environment variable

Create React App allows you to configure the behavior of the development server using environment variables. One such variable is BROWSER. By default, it is set to open, which causes the browser to open automatically. To disable this behavior, you can set the BROWSER variable to none.

BROWSER=none npm start

This command will start the development server without opening the browser. You can also set the BROWSER variable in your .env file if you prefer.

Solution 2: Modifying the scripts section in package.json

If you prefer not to use environment variables, you can achieve the same result by modifying the scripts section in your package.json file. By default, it contains a start script that runs the development server. You can modify this script to include the --no-open flag, which will prevent the browser from opening.

"scripts": {
  "start": "react-scripts start --no-open"
}

After making this change, you can start the development server using the usual npm start command, and the browser will not open automatically.

Conclusion

Disabling the automatic browser opening in Create React App (CRA) can be achieved using either the BROWSER environment variable or by modifying the scripts section in package.json. Choose the solution that suits your preference and project requirements.