Triggering 'npm run build' on Save in React Projects for Chrome Extensions

Streamline Your React Development Workflow by Automatically Executing Builds When Files Change

Good day everyone!

Developing a Chrome extension using React can be an exciting way to enhance your browser experience. However, a typical React development workflow, which involves running a local development server, may not be suitable for Chrome extension development. In this blog post, we'll discuss how to automatically trigger the npm run build command whenever you save a file in your React project using nodemon. This approach can be particularly useful when developing Chrome extensions, as it helps maintain a more efficient workflow.

Source code here

Step 1: Install nodemon as a development dependency

nodemon is a utility that monitors file changes in your project and automatically restarts your application. To begin, install nodemon as a development dependency by running the following command

npm install --save-dev nodemon

Step 2: Add a new script to your package.json

Next, create a new script in your package.json file that will utilize nodemon to watch for file changes and execute the npm run build command. You can name the script "watch-build" or anything else you prefer:

"scripts": {
  ...
  "watch-build": "nodemon --exec 'npm run build' --watch src --watch public --ext js,jsx,ts,tsx,css,json"
}

This script instructs nodemon to monitor the src folder and public folder and execute the npm run build command whenever there is a change in any file with the specified extensions (.js, .jsx, .ts, .tsx, .json and .css).

Step 3: Run the new script

After saving your package.json file, run the new script with the following command:

npm run watch-build

nodemon will now automatically run the npm run build command whenever you save a file in your React project with the specified file extensions.

Conclusion

In this blog post, we covered how to automatically trigger the npm run build command in a React project using nodemon and how this approach can be particularly beneficial when developing Chrome extensions. By automating the build process and simplifying your workflow, you can focus on creating a powerful and engaging browser extension with React.