How to disable file watching in a react app

I suggest you to reconsider your goal to launch a react app with react-scripts in a production-like environment.

As @adamz4008 mentioned, you shouldn't run development server on production. Therefore, you won't hit the watching issue, and you don't need to solve it.

Documentation / best practices

According to software development best practices there are different phases of the development.

Facebook React documentation covers them as well.

  1. Develop locally

    npm start / yarn start

    Runs the app in development mode.

    https://github.com/facebook/create-react-app#npm-start-or-yarn-start

  2. Build

    npm run build / yarn build

    Builds the app for production to the build folder.

    It correctly bundles React in production mode and optimizes the build for the best performance.

    The build is minified and the filenames include the hashes.

    Your app is ready to be deployed.

    https://github.com/facebook/create-react-app#npm-run-build-or-yarn-build

    Installing NPM dependencies

    BTW, usually people run npm install before npm run build to install all necessary dependencies.

    But I recommend to use npm ci. It has deterministic stable results and higher performance.

    https://docs.npmjs.com/cli/ci.html

  3. Release / Deploy

    As your application is just a bunch of static files, you can simply deploy it as static HTML web site to any web server / platform.

My experience

In my practical experience with Azure, I deploy React app to a storage account as a static web site (without using/configuring any web server explicitly).

https://docs.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website

You can choose any other option.


So something you could do is create the build file and then serve the static files in the directory with a tiny local server.

You could run the yarn build then have a script that runs this code yarn node ./server.js (or whatever you name it)

This could allow for the performant builds and the server similar to the DevServer that react-scripts start server.

I also don't know if you need profiling in production but I added a feature on react-scripts build --profile that allows classnames and functions names to persist through the terser.

const express = require(`express`);
require(`dotenv`).config();

express()
  .use(express.static(`${__dirname}/build`))
  .get(`*`, (req, res) => res.sendFile(`${__dirname}/build/index.html`))
  .listen(process.env.PORT || 1234, () => console.log(`__SERVER_RUNNING__`, process.env.PORT),
  );