Change Package Json Need to Run Build Again

Editor's note: This article was last updated on 30 March 2022 to reflect more updated and advanced data about react-scripts, including environs 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, specially with webpack and Boom-boom, 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 chosen react-scripts that makes information technology much easier to build React applications.

In this guide, we'll give an overview of react-scripts, compare a few dissimilar 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 environs variables for react-scripts

What is a script?

In programming, a script is a list of instructions that dictates what to practice to another programme; React is no exception. Create React App ships with four chief scripts, each of which nosotros'll explore later.

Merely for now, we'll focus on where to find these scripts.

Commencement, 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 bundle. Now, check the bundle.json file of the newly created projection.

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

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

In the previous JSON snippet, the packet.json file has some default scripts, but information technology's still possible to edit them. Y'all tin can execute these scripts with your preferred Node parcel manager CLI.

Every bit you can meet, a fresh React app comes with iv scripts that use the package react-scripts. Now that nosotros know what a script is and where to notice them, allow'south dive into each i and explicate what it does to a React app.

kickoff

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

Y'all can run the start script control on the terminal with either npm or yarn:

yarn showtime npm starting time        

This command volition not merely get-go the development server, but information technology will also react and display the latest version each fourth dimension a change occurs with the webpack's Hot Module Replacement (HMR) feature. In addition, it will show lint errors on the final if it fails to get-go the server in the form of meaningful error messages.

test

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

The test script tin exist run on the terminal with the following commands:

yarn test npm examination        

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 exam cases check whether the app rendered "larn 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 beneath:

I won't swoop too deep into testing React apps, but keep in listen 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 y'all desire to. These separate files need to be merged or bundled into i, to be precise. That's one of the major benefits of the build script.

The other is performance; every bit y'all 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 lot can discover all deployable optimized static resources inside the build directory.

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

Meet 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-mode operation" and warns that "once you eject, y'all can't become back!" Create React App comes with an excellent configuration that helps y'all build your React app with the best practices in mind to optimize it.

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

Running the eject script will remove the unmarried build dependency from your projection. That means it will copy the configuration files and the transitive dependencies (east.g., webpack, Boom-boom, etc.) as dependencies in the packet.json file. If you practice that, you'll have to ensure that the dependencies are installed earlier building your project.

Later running the eject control, it won't be possible to run it over again, because all scripts will be available except the eject ane. 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 yous to customize anything in your React configuration, just ejecting may create dissimilar versions of react-scripts. Then, you have to maintain customized react-scripts yourself with every React projection. Therefore, creating a react-scripts fork is a better idea to make a reusable custom React app configuration.

You lot tin utilise 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 surround variables for react-scripts

Preconfigured React scripts don't typically accept many CLI options for customizing their default behaviors. Simply, react-scripts let developers practice various avant-garde configurations via environment variables that you can set via the terminal.

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

PORT=5000 yarn start PORT=5000 npm outset        

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 yous use the following JSON snippet in package.json, you tin 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 exam",   "eject": "react-scripts eject" }        

All supported environment variables are bachelor in the official documentation.

Conclusion

I promise this guide shed some calorie-free on the amazing configuration of Create React App. Not just does information technology come up with useful scripts that can help make whatsoever developer's life easier, only 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 iv preconfigured scripts, you tin can add more than scripts past updating your packet.json file like any other JavaScript project. The React team developed react-scripts with a generic configuration based on community feedback, so many React evolution teams use react-scripts without additional customizations. Therefore, consider opening an issue or discussion thread in the official repository for feature requests if you lot feel your requirement may solve anybody'due south problem.

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

Full visibility into product React apps

Debugging React applications tin can exist difficult, especially when users feel problems that are difficult to reproduce. If you're interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, endeavour LogRocket.

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens on your React app. Instead of guessing why issues happen, you can aggregate and report on what state your awarding was in when an effect occurred. LogRocket also monitors your app'south operation, reporting with metrics like client CPU load, client retention usage, and more.

The LogRocket Redux middleware packet adds an actress layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — first monitoring for free.

weaverdirld1936.blogspot.com

Source: https://blog.logrocket.com/everything-you-need-know-about-react-scripts/

Share this post