- I am very new to react (started a day ago). I used the create-react-app command line to create an app. The following is the order I did create-react-app my-app npm start Now app is running.
- My create-react-app is nested inside a backend express app with its own.env. However, I have a.env in the root of my front end app with REACTAPPHOST=localhost. In App.js, I console.log(process.env) and the only keys displayed are.
- Create-react-app Not Working Machine
- Npx Create-react-app Not Working Mac
- Create React App Proxy
- Create-react-app Not Found Mac
- Create React App 17
- Create-react-app Not Working Machinery
Starting a new React project is very complicated, with so many build tools. It uses many dependencies, configuration files, and other requirements such as Babel, Webpack, ESLint before writing a single line of React code. Create React App CLI tool removes all that complexities and makes React app simple. For this, you need to install the package using NPM, and then run a few simple commands to get a new React project.
The create-react-app is an excellent tool for beginners, which allows you to create and run React project very quickly. It does not take any configuration manually. This tool is wrapping all of the required dependencies like Webpack, Babel for React project itself and then you need to focus on writing React code only. This tool sets up the development environment, provides an excellent developer experience, and optimizes the app for production.
Requirements
Create React App CLI tool removes all that complexities and makes React app simple. For this, you need to install the package using NPM, and then run a few simple commands to get a new React project. The create-react-app is an excellent tool for beginners, which allows you to create and run React project very quickly. It does not take any.
The Create React App is maintained by Facebook and can works on any platform, for example, macOS, Windows, Linux, etc. To create a React Project using create-react-app, you need to have installed the following things in your system.
- Node version >= 8.10
- NPM version >= 5.6
Let us check the current version of Node and NPM in the system.
Run the following command to check the Node version in the command prompt.
Run the following command to check the NPM version in the command prompt.
Installation
Here, we are going to learn how we can install React using CRA tool. For this, we need to follow the steps as given below.
Install React
We can install React using npm package manager by using the following command. There is no need to worry about the complexity of React installation. The create-react-app npm package manager will manage everything, which needed for React project.
Create a new React project
Once the React installation is successful, we can create a new React project using create-react-app command. Here, I choose 'reactproject' name for my project.
NOTE: We can combine the above two steps in a single command using npx. The npx is a package runner tool which comes with npm 5.2 and above version.
The above command will take some time to install the React and create a new project with the name 'reactproject.' Now, we can see the terminal as like below.
The above screen tells that the React project is created successfully on our system. Now, we need to start the server so that we can access the application on the browser. Type the following command in the terminal window.
NPM is a package manager which starts the server and access the application at default server http://localhost:3000. Now, we will get the following screen.
Next, open the project on Code editor. Here, I am using Visual Studio Code. Our project's default structure looks like as below image.
In React application, there are several files and folders in the root directory. Some of them are as follows:
- node_modules: It contains the React library and any other third party libraries needed.
- public: It holds the public assets of the application. It contains the index.html where React will mount the application by default on the <div></div> element.
- src: It contains the App.css, App.js, App.test.js, index.css, index.js, and serviceWorker.js files. Here, the App.js file always responsible for displaying the output screen in React.
- package-lock.json: It is generated automatically for any operations where npm package modifies either the node_modules tree or package.json. It cannot be published. It will be ignored if it finds any other place rather than the top-level package.
- package.json: It holds various metadata required for the project. It gives information to npm, which allows to identify the project as well as handle the project?s dependencies.
- README.md: It provides the documentation to read about React topics.
React Environment Setup
Now, open the src >> App.js file and make changes which you want to display on the screen. After making desired changes, save the file. As soon as we save the file, Webpack recompiles the code, and the page will refresh automatically, and changes are reflected on the browser screen. Now, we can create as many components as we want, import the newly created component inside the App.js file and that file will be included in our main index.html file after compiling by Webpack.
Next, if we want to make the project for the production mode, type the following command. This command will generate the production build, which is best optimized.
Node
Update asdf
(source)
node installed with homebrew and asdf
I had node installed with
brew
previously, but I use asdf now. During my research I found answers indicating I must completely deinstall node.Verify if
npx
is only installed by asdf
:Check global installed node packages
When switching the global node version, deinstall packages and install them again in the new system version. In general removing global installations from older node versions is a good thing to do (source).
node-gyp and Python
node-gyp says it works with Python > 3.x, but only when used with a proper
npm
version (which comes with its own node-gyp
version). You can read more about this in the sections below.I did not test setting the Configuring Python Dependency though.
node-gyp and [email protected]
I had to install and use
[email protected]
with [email protected]
after I read this:It might not be node-gyp. Apparently it uses python 3 since version 5.5, although some windows users still report issues. It likely stems from node-sass using an older node-gyp dependency as indicated by a comment in the link below.
(source)
It still looks like some dependencies use [email protected] (proofed here as well as mentioned also here, here and here), which causes
node-gyp
errors.Only then CRA (and other commands) worked again.
At this point my global
.tool-versions
looks like this:Upgrade npm to update npm-internal node-gyp with [email protected] support
npm
comes with an internal version of node-gyp
(source). This can also cause issues (when old versions are used). You can update npm
(and consequently node-gyp
)(source)
It is also documented here:
You do not need Python 2.7 in order to run node-gyp. Python 3 has been supported since version 5.0.5. If you have verified that your issue is python related, as in that node-gyp is trying to run a script which contains errors according to the python 3 interpreter, then try the following:
- Update your global node-gyp install.
npm install -g node-gyp
- Update your npm install.
npm install -g npm
Both modules are separate, npm will have its own copy of node-gyp. If you are trying to link a local package, for instance, npm will use its own copy of node-gyp. However, if you run node-gyp from the command line, it will use the other.
CRA
npx create-react-app
npx searches for globally-accessible bins, but also the bin folder of every node_modules at or above your current working directory. You probably have create-react-app installed higher in your directory tree. You can test this by seeing if adding the ignore existing flag makes it work: npx --ignore-existing create-react-app newapp.
(source, but also mentioned here)
Although
npx --ignore-existing create-react-app newapp
worked (when npx create-react-app newapp
did not), I figured that removing old node files (see other chapter), removing the global CRA installation and using an [email protected] again helped.Create-react-app Not Working Machine
I did not test
npx create-react-app@latest myapp
though (was also mentioned).Npx Create-react-app Not Working Mac
Remove global CRA installation
When you got the following error, you have to remove the old global CRA installation:
A template was not provided. This is likely because you're using an outdated version of create-react-app.
If this still exists, run this to uninstall it (according to this issue).
node-gyp
requires XCode's Command Line Tools. You have to verify they are installed and work.node-gyp, XCode and Command Line Tools
Create React App Proxy
Test if the Command Line Tools are properly installed with this tutorial.
Uninstall XCode and Command Line tools
(https://medium.com/@onexlab.io/uninstall-xcode-from-macos-eca1b69dc836)
Install Command Line Tools
Install XCode from the App Store and then you can install the Command Line Tools afterward. Just download and install them manually.
Troubleshooting
TypeError: '>=' not supported between instances of 'tuple' and 'str'
Create-react-app Not Found Mac
This error happens, when an old version of
node-gyp
is used with [email protected]
. Ensure you install the latest node-gyp
with npm
to overwrite their internal node-gyp
version (see Python section above for more details).make failed with exit code 2
Create React App 17
![Create-react-app Not Working Mac Create-react-app Not Working Mac](/uploads/1/3/4/0/134047581/404115623.png)
Create-react-app Not Working Machinery
- Some also mentioned that downgrading node resolves the issue too, as
npm
comes with its ownnode-gyp
! This is related to the [email protected] issue mentioned above. - https://codeforgeek.com/make-failed-with-exit-code-2/ (mentioned here, and here)