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 information nigh react-scripts, including environment variables.

What are react-scripts?

In the past, creating a React app was a painful process. You lot had to slog through a lot of configuration, particularly 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 requite an overview of react-scripts, compare a few different types of scripts, and describe how Create React App dramatically streamlines the React development process. Permit'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 chief scripts, each of which nosotros'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 in a higher place 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. At present, check the package.json file of the newly created project.

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

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

In the previous JSON snippet, the package.json file has some default scripts, but it'south even so possible to edit them. Y'all tin execute these scripts with your preferred Node package managing director CLI.

As you can run into, 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 observe them, let'due south dive into each one and explain what it does to a React app.

first

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

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

yarn kickoff npm start        

This control will not only outset the development server, but it will too react and display the latest version each time a change occurs with the webpack's Hot Module Replacement (HMR) feature. In addition, information technology volition show lint errors on the terminal if it fails to commencement the server in the form of meaningful fault letters.

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 exam script can exist run on the last with the following commands:

yarn test npm test        

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

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

The above examination cases check whether the app rendered "larn react" (example insensitive) or not. Enter the npm test (or yarn exam) command and printing the a fundamental to run all test cases, equally shown below:

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

build

React is modular, which is why you can create several files or components if you desire to. These dissever files demand to exist merged or bundled into one, to be precise. That's i of the major benefits of the build script.

The other is operation; equally you know, development mode is not optimized for production environments. And React uses the build script to ensure that the finished projection is bundled, minified, and optimized with all-time practices for deployment.

The script can be run with the post-obit commands.

yarn build npm run build        

Later on running the build script, you can notice all deployable optimized static resource inside the build directory.

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

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

squirt

The Create React App documentation characterizes this script as a "one-mode functioning" and warns that "once you eject, you lot can't go back!" Create React App comes with an excellent configuration that helps you lot build your React app with the best practices in heed to optimize it.

Nonetheless, we may take to customize the pre-built react-scripts with boosted configurations in some avant-garde scenarios. The eject script gives y'all total control over the React app configuration. For example, you lot 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 volition copy the configuration files and the transitive dependencies (e.m., webpack, Babel, etc.) as dependencies in the package.json file. If you do that, you'll accept to ensure that the dependencies are installed before building your projection.

Subsequently running the squirt command, it won't exist possible to run information technology again, because all scripts volition be available except the eject i. Employ this command simply if you need to. Otherwise, stick with the default configuration. Information technology's ameliorate, anyway.

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

yarn eject npm run squirt        

Ejecting helps y'all to customize anything in your React configuration, but ejecting may create different versions of react-scripts. And then, you have to maintain customized react-scripts yourself with every React project. Therefore, creating a react-scripts fork is a better thought 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 to a higher place command scaffolds a new React app by using the react-scripts-fork package as the react-scripts source.

Using surroundings variables for react-scripts

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

For instance, you can modify the evolution server port with the PORT environment variable, as shown below:

PORT=5000 yarn start PORT=5000 npm start        

Also, you tin modify the default application build directory past setting BUILD_PATH equally 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, as well. For case, if you use the following JSON snippet in package.json, yous can always employ port 5000 with the showtime script:

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

All supported surround variables are available in the official documentation.

Decision

I hope this guide shed some light on the astonishing configuration of Create React App. Not only does it come with useful scripts that can help brand whatsoever developer's life easier, but some commands come up 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 past updating your package.json file like whatsoever other JavaScript projection. The React squad developed react-scripts with a generic configuration based on customs feedback, so many React development teams utilize react-scripts without additional customizations. Therefore, consider opening an consequence or word thread in the official repository for feature requests if you feel your requirement may solve anybody's problem.

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

Full visibility into production React apps

Debugging React applications can be hard, especially when users experience issues that are hard to reproduce. If y'all're interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

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

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all deportment and country from your Redux stores.

Modernize how you debug your React apps — kickoff monitoring for complimentary.

mcnamarailly1978.blogspot.com

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