How to develop an application guided by Create-react-app (iv)

This article is a translation of how to develop apps bootstrapped with Create React APP official documentation

Series Articles

1. How to develop an application guided by Create-react-app
2. How to develop an application guided by Create-react-app (i)
3. How to develop the application guided by Create-react-app (II.)
4. How to develop an application guided by Create-react-app (iii)

Advanced Configuration

You can adjust various development and production settings by setting environment variables or. env in the shell.

Variable	Development	Production	Usage
BROWSER			By default, the Create React APP opens the default system browser, which supports Chrome on Mac OS. Specify the browser to override this behavior, or set it to none completely disable it.
HOST			By default, the development Web server is bound to the localhost . You can use this variable to specify a different host.
PORT			By default, the development Web server will attempt to listen on port 3000 or prompt you to try the next available port. You can use this variable to specify a different port.
HTTPS			When set to true , the Create React App will https run the development Web server in mode.
Public_url			The Create React app assumes that your application hosts the root directory of the Web server or the package.json homepage subpath specified in (). Typically, the Create React APP ignores hostname. You can use this variable to force the resource to be referenced verbatim to the URL you provided (including hostname). This can be especially useful when using a CDN to host your application.
Ci			When set to true , the Create React App treats the warning as a failure in the build. It also makes Test runner in non-observer mode. This flag is set by default for most CI.

Troubleshooting npm startDoesn ' t detect changes

When the npm start file is saved at run time, the browser refreshes the updated code.
If this does not occur, try one of the following workarounds:

• If your project is in the Dropbox folder, try moving it out.
• If the observer does not see the index.js file named, and you refer to it through the folder name, you need to restart the observer, which is caused by a webpack error.
• Some editors like vim and IntelliJ have a "secure write" feature that currently interrupts the observer. You need to disable it. Follow the instructions in "Using an editor that supports secure writes."
• If your project path contains parentheses, try moving the items to a path that does not have them. This is caused by the Webpack observer error.
• On Linux and MacOS, you may need to adjust your system settings to allow more observers.
• If the project is running in a virtual machine, such as virtual machine Vagrant, a file is created in the project directory .env if it does not exist and is added to it CHOKIDAR_USEPOLLING=true . This ensures that the next time npm start The watcher uses polling mode in the VM as needed.

If these solutions don't help, leave a comment in this topic.

npm testHangs on MacOS Sierra

If you run and the npm test console is react-scripts test --env=jsdom stuck after printing, it could be your Watchman installation problem, such as facebookincubator/create-react-app#713https://github.com/ described in facebookincubator/create-react-app/issues/713.

We recommend that you delete node_modules and run the project first npm install (or yarn if you use it). If you don't have help, you can try one of the many workarounds mentioned in the following questions:

• facebook/jest#1767
• facebook/watchman#358
• ember-cli/ember-cli#6259

It is learnt that installing Watchman 4.7.0 or later can resolve this issue. If you use homebrew, you can run these commands to update them:

watchman shutdown-serverbrew updatebrew reinstall watchman

You can find additional installation methods on the Watchman documentation page.

If you still don't have help, try running launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist .

There are also reports that uninstalling Watchman can solve the problem. So if there is no additional help, remove it from the system and try again.

npm run buildSilently fails

It is reported that there may be failures on machines without swap space npm run build , which is common in cloud environments. If the symptoms match, consider adding some swap space for the built machine or building the project locally.

npm run buildFails on Heroku

This may be a case-sensitive issue with file names. See this section.

Someting Missing?

If you have more "how to" ideas on this page, please let us know or contribute some!

How to develop an application guided by Create-react-app (iv)