How to disable file watching in a react app

Question

EDIT:

My question is now whether it is possible to launch a react app with react-scripts in a production-like environment where I don't necessarily want changes to files to affect the running react server. check below in Solutions section under C for a brief description on what I have already tried.

I have been struggling with this question for the past two weeks and I am unsure how to proceed. I would like to host my React App on a Node Azure Web App (Linux).

The problem I am seeing:

Starting the development server...

events.js:170
      throw er; // Unhandled 'error' event
      ^

Error: ENOSPC: System limit for number of file watchers reached, watch 'xxx'
    at FSWatcher.start (internal/fs/watchers.js:165:26)
    at Object.watch (fs.js:1274:11)
    at createFsWatchInstance (/home/u/work/some-repo/node_modules/chokidar/lib/nodefs-handler.js:37:15)
    at setFsWatchListener (/home/u/work/some-repo/node_modules/chokidar/lib/nodefs-handler.js:80:15)
    ...
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/u/.npm/_logs/2019-08-30T09_50_59_595Z-debug.log

Solutions attempted:

After reading up on this issue online I have understood that the solution might involve

A: no space on the system. I have checked using df -h and looks like there is plenty of space (at least 50% for my machine).

B: file watcher limit reached, this seems to be the problem but unfortunately the Azure Web App is a read-only file system, and running something like echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p did not help.

C: Disable watching with React. It doesn't appear that I can do this however, if anyone is aware of how to Disable watching with React it would be very much appreciated. So far I have tried CI=true npm start to no avail (when I ran command and made a change to a file, the change was actively reflected on my browser: localhost:3000

I have also tried adding a multitude of options inside of node_modules/react-scripts/webpack.config.js such as: watch: false and ignore:/node_modules/.

Thanks, Nik

Answer 1

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.

Answer 2

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),
  );