npm scripts are commands or scripts that can be defined in the scripts section of a project’s package.json file. NPM (Node Package Manager) is a package manager for JavaScript/node js projects that allows developers to manage project dependencies and automate various tasks. The scripts section provides a way to define custom commands that can be executed using the npm run command.
By defining scripts in the package.json file, developers can easily run common tasks associated with their project, such as building, testing, linting, deploying, and more. These scripts can be executed from the command line using the following syntax:
npm run <script-name>The <script-name> refers to the key name of the script defined in the scripts section. For example, if you have a script named “build” in your package.json file, you can run it with the following command:
npm run buildnpm scripts provide a convenient way to automate tasks without requiring additional build tools or task runners. They leverage the existing capabilities of npm, allowing developers to execute complex workflows with ease. Furthermore, npm scripts can also be chained together by specifying one script as a command within another script, enabling the execution of multiple tasks in sequence.
Overall, npm scripts offer a flexible and lightweight approach to task automation within JavaScript projects, making it easier to manage and streamline various development tasks.
Start
“start”: This script starts the development server, allowing you to preview your React application locally. It typically launches a local development environment and automatically reloads the application when changes are made to the source code.
The command “react-scripts start” is typically used to start the development server for a React application. It is commonly found in the “start” script defined in the “scripts” section of a project’s “package.json” file when using Create React App (CRA), a popular tool for bootstrapping React projects.
react-scripts start
When you run “react-scripts start” from the command line, it internally executes a script provided by the “react-scripts” package, which is a dependency installed by Create React App. This script sets up a development environment with the necessary configurations and starts a local development server.
Here’s what happens when you run “react-scripts start”:
- The script checks if the required dependencies and configuration files are in place. It ensures that the project is set up correctly to run a React application.
- It sets up an appropriate development server based on the configuration specified in the project’s “package.json” file and other associated files like “webpack.config.js”. This server typically uses Webpack and Babel under the hood to compile and bundle the React code.
- It starts the development server, which listens for incoming requests on a specific port (usually port 3000 by default).
- The development server serves the React application and provides hot module reloading, which means that any changes you make to the source code are automatically reflected in the browser without requiring a full page refresh.
- The server also handles other features like URL routing, network requests, and other development-specific optimizations.
Overall, the “react-scripts start” command is a convenient way to launch a local development server for your React application. It simplifies the configuration and setup process, allowing you to focus on building and testing your React components without worrying about the underlying development server configuration.
Output: npm run start
Build
“build”: Running this script creates a production-ready build of your React application. It optimizes the code for performance by minifying and bundling the JavaScript, CSS, and other assets. The resulting build files are typically suitable for deployment to a web server.
react-scripts build
The command “react-scripts build” is used to create a production-ready build of a React application. It is typically found in the “build” script defined in the “scripts” section of a project’s “package.json” file when using Create React App (CRA), a popular tool for bootstrapping React projects.
When you run “react-scripts build” from the command line, it internally executes a script provided by the “react-scripts” package, which is a dependency installed by Create React App. This script handles the build process and prepares the application for deployment.
what happens when execution of “react-scripts build”:
- The script reads the configuration files of your project, such as “package.json” and “webpack.config.js”. It determines the necessary settings for building the React application.
- It performs optimizations and transformations on the source code. This includes minifying and bundling the JavaScript, CSS, and other assets of your application.
- The script generates a production-ready build of your React application. It typically creates a set of static files that can be served by a web server.
- The build output is placed in a specified directory, often named “build” or “dist”. This directory contains optimized and compressed versions of your JavaScript, CSS, and other assets, along with an HTML file that serves as the entry point for the application.
- The build process may also involve performing additional tasks, such as optimizing assets for caching, generating sourcemaps for debugging, and handling asset paths correctly for deployment.
The resulting build files are optimized for performance and can be deployed to a web server or hosting platform. They are typically more compact and efficient compared to the development version, as they have undergone minification, bundling, and other optimizations.
By running “react-scripts build,” you can easily generate a production-ready build of your React application without worrying about complex build configurations. The process encapsulated by the script ensures that your application is optimized for performance and ready for deployment.
Output: npm run build
create static build in build folder inside your project
Test
“test”: This script executes the tests you’ve written for your React components. It helps ensure that your components function as intended and helps catch potential bugs or regressions. Testing frameworks like Jest or React Testing Library are commonly used with this script.
react-scripts test
The command “react-scripts test” is used to execute tests for a React application. It is typically found in the “test” script defined in the “scripts” section of a project’s “package.json” file when using Create React App (CRA), a popular tool for bootstrapping React projects.
When you run “react-scripts test” from the command line, it internally executes a script provided by the “react-scripts” package, which is a dependency installed by Create React App. This script sets up and runs the test suite for your React application.
what happens when execution of “react-scripts test”:
The script looks for test files in your project. By default, it searches for files with the “.test.js” or “.spec.js” extension in the “src” directory of your project. You can customize the test file pattern and location by modifying the configuration.
It sets up the testing environment, including the necessary dependencies and configurations. This often involves setting up a test runner such as Jest, a popular JavaScript testing framework commonly used with React.
The script executes the defined tests. This can include unit tests, integration tests, or any other type of tests you’ve written for your React components and logic. The tests are run in a controlled environment, separate from the actual application, to ensure isolation and reproducibility.
During the test execution, the script captures and reports test results, including successes, failures, and any errors encountered. It provides a summary of the test run, including information about the number of passed and failed tests.
The script may also perform additional tasks, such as code coverage analysis, which calculates the percentage of code that is covered by tests. It can generate coverage reports that highlight which parts of your code are tested and which are not.
Overall, the “react-scripts test” command automates the execution of tests for your React application. It simplifies the setup of the testing environment and provides a straightforward way to run and report on your tests. By running this command, you can ensure the functionality, reliability, and correctness of your React components and application logic.
Output: npm run test
eject
“eject”: If you’re using Create React App (a popular React project setup tool), the “eject” script allows you to eject from the default configuration. This action provides you with full control over the build setup and dependencies of your React project. It’s important to note that ejecting is irreversible, so it’s recommended to use it only when you need advanced customization options that are not available in the default configuration.
react-scripts eject
The “react-scripts eject” command is used in Create React App (CRA) projects to “eject” from the default configuration provided by CRA. It allows you to gain full control over the build setup and dependencies of your React project. However, it’s important to note that this command is irreversible, so it should be used with caution.
When you run “react-scripts eject” from the command line, it triggers a one-time operation that performs the following actions:
- It copies the configuration files and dependencies that were initially hidden within the CRA tooling into your project’s root directory. These files include configuration files like “webpack.config.js” and “babel.config.js,” as well as other scripts and configuration files used by CRA.
- The command modifies your project’s “package.json” file to remove the “react-scripts” dependency and replaces it with the specific dependencies required for the build setup. This means that you’ll be responsible for managing those dependencies moving forward.
- Ejecting also provides you with full control over the build scripts. The command updates the “scripts” section of your “package.json” file, replacing the pre-defined scripts provided by CRA with the ejected configuration. This allows you to customize and extend the build process to meet your specific project requirements.
- By ejecting, you gain the ability to modify the build configuration directly. This means you can modify webpack settings, customize Babel transformations, add additional tools or plugins, and perform other advanced configurations as needed.
It’s important to consider a few things before running “react-scripts eject”:
- Ejecting is a one-way operation. Once you eject from the default configuration, there is no built-in way to go back to the original CRA setup. Therefore, make sure you understand the implications and are ready to take full responsibility for managing and configuring your project’s build process.
- Ejecting exposes more configuration options and flexibility but also requires more knowledge and maintenance. You’ll be responsible for managing dependencies, keeping the build setup up to date, and resolving any configuration-related issues that may arise.
- Ejected projects may require more manual setup and maintenance when updating to new versions of CRA or its dependencies. You won’t automatically receive the benefits of future updates provided by CRA unless you manually integrate those changes into your ejected project.
In summary, the “react-scripts eject” command is used to expose and take control of the build setup and configuration of a CRA project. It enables customization and advanced configuration but requires a higher level of expertise and maintenance.
Output: npm run eject
lint
“lint”: The “lint” script runs a linter, such as ESLint, to analyze your code for syntax errors, code style violations, and potential bugs. It helps enforce consistent coding practices and maintain code quality across your project.
The “eslint src” command is used to run ESLint, a popular linter for JavaScript, on the files within the “src” directory of your project. It enforces coding conventions, detects potential errors, and promotes consistent code style.
eslint src
npm i eslint --save-devWhen you run “eslint src” from the command line, the following process typically takes place:
- ESLint reads the configuration files in your project, such as “.eslintrc” or “.eslintrc.json”, to determine the rules and settings to apply during linting. These configuration files specify which rules to enable or disable, the coding style to enforce, and any additional custom rules specific to your project.
- The “src” directory is recursively searched for JavaScript or JSX files to lint. ESLint analyzes each file, checking for issues like syntax errors, unused variables, missing semicolons, incorrect indentation, code complexity, and violations of the configured rules.
- ESLint reports any errors or warnings it encounters during the linting process. Errors represent issues that must be addressed, while warnings highlight areas where your code may not follow best practices but are not necessarily critical.
- The command’s output typically includes a summary of the linting results, such as the total number of errors and warnings found, as well as detailed information about each specific issue.
By running “eslint src” regularly, you can maintain code quality, catch potential bugs, and ensure that your code adheres to the defined coding standards and best practices. It helps promote consistency across your codebase and improves collaboration by catching common mistakes and enforcing a unified code style.
Output: npm run lint
format
“format”: This script automatically formats your code according to a specified code style. It uses a code formatter like Prettier to ensure consistent formatting throughout your React project. Code formatting helps improve code readability and maintainability.
prettier –write “src/**/*.js”
npm i prettier --save-devThe command “prettier –write “src/**/*.js”” is used to format JavaScript files within the “src” directory of your project using the Prettier code formatting tool. It automatically applies a consistent code style to your codebase, making it more readable and maintainable.
When you run “prettier –write “src/**/*.js”” from the command line, the following process typically takes place:
- Prettier identifies all JavaScript files with the “.js” extension within the “src” directory and its subdirectories. The pattern “src/**/*.js” is a glob pattern that matches all files ending with “.js” within the “src” directory and any nested directories.
- Prettier analyzes each JavaScript file and applies its opinionated code formatting rules to transform the code into a standardized style. This includes rules for indentation, line breaks, spacing, parentheses placement, and other aspects of code style.
- The “–write” flag instructs Prettier to overwrite the original files with the formatted code. This means that the files are updated in place, and their content is modified to reflect the formatted version.
- Prettier reports any formatting changes made to the files, typically listing the filenames and the number of changes applied to each file.
By running “prettier –write “src/**/*.js””, you can automatically format your JavaScript files according to the configured Prettier rules. This helps ensure consistency across your codebase and saves time by eliminating manual formatting efforts. It’s recommended to integrate Prettier into your development workflow to maintain a consistent code style and improve code readability.
Output: npm run format
prettier
“prettier”: Similar to the “format” script, the “prettier” script specifically formats your code using Prettier. It enforces a consistent code style and can be used independently if you only want to format your code without running other scripts.
prettier –check “src/**/*.js”
npm i prettier --save-devThe command “prettier –check “src/**/*.js”” is used to check the formatting of JavaScript files within the “src” directory of your project using the Prettier code formatting tool. It performs a check to see if the files adhere to the specified code style without actually modifying them.
When you run “prettier –check “src/**/*.js”” from the command line, the following process typically takes place:
- Prettier identifies all JavaScript files with the “.js” extension within the “src” directory and its subdirectories. The pattern “src/**/*.js” is a glob pattern that matches all files ending with “.js” within the “src” directory and any nested directories.
- Prettier analyzes each JavaScript file and checks if it conforms to the configured code formatting rules. It compares the current formatting of the files against the expected formatting based on the Prettier rules.
- If any formatting issues are found in a file, Prettier reports them as errors. These errors can include inconsistent indentation, improper line breaks, missing or extra whitespace, incorrect bracket placement, and other violations of the specified code style.
- The “–check” flag instructs Prettier to only report the formatting issues without modifying the files. It performs a read-only check to assess the code’s adherence to the desired code style.
- Prettier generates a summary of the check results, typically listing the filenames and the number of formatting errors found in each file.
By running “prettier –check “src/**/*.js””, you can identify any deviations from the desired code style without actually modifying the files. This allows you to spot formatting inconsistencies, integrate Prettier into your code review process, and enforce code style standards within your project. It’s recommended to incorporate this check as part of your development workflow to maintain a consistent and clean codebase.
Output: npm run prettier
deploy
“deploy”: This script automates the deployment process of your React application. It can include tasks like pushing your built files to a hosting platform or server, configuring any necessary deployment settings, and making your application accessible to users.
analyze
“analyze”: Running this script utilizes a tool like Webpack Bundle Analyzer to analyze the size and composition of your bundled JavaScript files. It helps identify potential performance bottlenecks, code duplication, or unnecessary dependencies, allowing you to optimize your application’s performance.
storybook
“storybook”: This script launches Storybook, a development environment for designing, building, and testing React components in isolation. Storybook provides a UI playground where you can view and interact with your components individually, making it easier to develop and showcase UI components.
Package.json code
{
"name": "npm-scripts",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint src",
"format": "prettier --write \"src/**/*.js\"",
"prettier": "prettier --check \"src/**/*.js\""
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint": "^8.40.0",
"prettier": "^2.8.8"
}
}Summary
To conclude, npm scripts are essential tools in React projects that streamline development tasks, ensure code quality, and automate processes. In this article, we explored common scripts such as “start,” “build,” “test,” “lint,” “format,” “deploy,” “analyze,” “storybook,” and “eject.”
We also covered commands like “eslint src” for enforcing coding conventions and “prettier –write” for code formatting. By leveraging these scripts and commands, developers can enhance efficiency, maintain code consistency, and simplify the development and deployment workflows in their React projects.
previous article : https://www.sitejuggler.com/how-to-create-custom-datatable-in-react/
