Everything you need to know about react-scripts

Editor’s note: This article was last updated on 30 March 2022 to reflect more updated and advanced information about react-scripts, including environment variables.

What are react-scripts?

In the past, creating a React app was a painful process. You had to slog through a lot of configuration, especially with webpack and Babel, before you could get your hands dirty and develop something meaningful.

Fortunately, today we have Create React App, a handy module that comes with an outstanding configuration, and a scripts command called react-scripts that makes it much easier to build React applications.

In this guide, we’ll give an overview of react-scripts, compare a few different types of scripts, and describe how Create React App dramatically streamlines the React development process. Let’s dive in!

Contents

• What is a script?
• start
• test
• build
• eject
• Using environment variables for react-scripts

What is a script?

In programming, a script is a list of instructions that dictates what to do to another program; React is no exception. Create React App ships with four main scripts, each of which we’ll explore later.

But for now, we’ll focus on where to find these scripts.

First, create a new React app with the following command to find predefined scripts:

npx create-react-app my-app

The above command creates a new React app with cra-template and all required configurations. Every configuration required for the React app comes through the react-scripts package. Now, check the package.json file of the newly created project.

In React apps, scripts are located in the package.json file’s script section, as shown below:

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

In the previous JSON snippet, the package.json file has some default scripts, but it’s still possible to edit them. You can execute these scripts with your preferred Node package manager CLI.

As you can see, a fresh React app comes with four scripts that use the package react-scripts. Now that we know what a script is and where to find them, let’s dive into each one and explain what it does to a React app.

start

React uses Node.js on development to open the app on http://localhost:3000, thus the start script enables you to start the webpack development server.

You can run the start script command on the terminal with either npm or yarn:

yarn start
npm start

This command will not only start the development server, but it will also react and display the latest version each time a change occurs with the webpack’s Hot Module Replacement (HMR) feature. In addition, it will show lint errors on the terminal if it fails to start the server in the form of meaningful error messages.

test

Create React App uses Jest as a test runner. The test script enables you to launch the test runner in interactive watch mode that lets you control Jest with your keyboard.

The test script can be run on the terminal with the following commands:

yarn test
npm test

The default React template comes with one predefined test case for the sample application interface. Open the src/App.test.js file and find the following sample test case:

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

The above test cases check whether the app rendered “learn react” (case insensitive) or not. Enter the npm test (or yarn test) command and press the a key to run all test cases, as shown below:

I won’t dive too deep into testing React apps, but keep in mind that any file with .test.js or .spec.js extensions will be executed when the script is launched.

build

React is modular, which is why you can create several files or components if you want to. These separate files need to be merged or bundled into one, to be precise. That’s one of the major benefits of the build script.

The other is performance; as you know, development mode is not optimized for production environments. And React uses the build script to ensure that the finished project is bundled, minified, and optimized with best practices for deployment.

The script can be run with the following commands.

yarn build
npm run build

After running the build script, you can find all deployable optimized static resources inside the build directory.

There are some additional options that can be passed to the build script. For example, you can use the --stats option to generate a bundle stats file that you can visualize with the webpack-bundle-analyzer tool.

See the docs for a deeper dive on how to enhance your build script.

eject

The Create React App documentation characterizes this script as a “one-way operation” and warns that “once you eject, you can’t go back!” Create React App comes with an excellent configuration that helps you build your React app with the best practices in mind to optimize it.

However, we may have to customize the pre-built react-scripts with additional configurations in some advanced scenarios. The eject script gives you full control over the React app configuration. For example, you can customize the webpack or Babel configuration according to a specific need by ejecting the React app.

Running the eject script will remove the single build dependency from your project. That means it will copy the configuration files and the transitive dependencies (e.g., webpack, Babel, etc.) as dependencies in the package.json file. If you do that, you’ll have to ensure that the dependencies are installed before building your project.

After running the eject command, it won’t be possible to run it again, because all scripts will be available except the eject one. Use this command only if you need to. Otherwise, stick with the default configuration. It’s better, anyway.

To run the command on the terminal, type the following command.

yarn eject
npm run eject

Ejecting helps you to customize anything in your React configuration, but ejecting may create different versions of react-scripts. Then, you have to maintain customized react-scripts yourself with every React project. Therefore, creating a react-scripts fork is a better idea to make a reusable custom React app configuration.

You can use a forked react-scripts module with the following command:

npx create-react-app my-app --scripts-version react-scripts-fork

The above command scaffolds a new React app by using the react-scripts-fork package as the react-scripts source.

Using environment variables for react-scripts

Preconfigured React scripts don’t typically accept many CLI options for customizing their default behaviors. But, react-scripts let developers do various advanced configurations via environment variables that you can set via the terminal.

For example, you can change the development server port with the PORT environment variable, as shown below:

PORT=5000 yarn start
PORT=5000 npm start

Also, you can change the default application build directory by setting BUILD_PATH as follows:

BUILD_PATH=./dist yarn build
BUILD_PATH=./dist npm run build

If you want, you can update your existing script definitions with environment variables, too. For example, if you use the following JSON snippet in package.json, you can always use port 5000 with the start script:

"scripts": {
  "start": "PORT=5000 react-scripts start", // port 5000 
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

All supported environment variables are available in the official documentation.

Conclusion

I hope this guide shed some light on the amazing configuration of Create React App. Not only does it come with useful scripts that can help make any developer’s life easier, but some commands come with flexible options that enable you to fit the scripts to the unique needs of your project.

Even though Create React App provides four preconfigured scripts, you can add more scripts by updating your package.json file like any other JavaScript project. The React team developed react-scripts with a generic configuration based on community feedback, so many React development teams use react-scripts without additional customizations. Therefore, consider opening an issue or discussion thread in the official repository for feature requests if you feel your requirement may solve everyone’s problem.

Otherwise, you can customize react-scripts by ejecting or forking for advanced and unique use cases.