1. Node environment and development tools preparation

Front-end engineering development, local startup development environment is based on NodeJS, command line input instructionsnode -vYou can help verify that Node is installed on your computer, and if not, you canThe node’s official websiteDownload the installation package as shown below:It’s a one-click foolproof installation on both Windows and MAC, and you don’t even need to manually configure environment variables, which I won’t cover here.

2. Prepare development tools

Front-end development tools, common VSCode, WebStorm, Atom, etc., just use one of them will be enough to complete your development tasks. Here I give a comparison of common editors.

names advantages disadvantages Recommended degree
WebStorm A little bit more, full of features Charge, occupy large resources Do u u
Atom Clean interface, free Too many plug-ins will be slow and not smooth enough Do u u
VSCode Lightweight, plugins, support customization, free Too many plug-ins cause conflicts, and the code prompts are unfriendly Do u u u u

I will use VSCode for the rest of my development.

VsCode as the current most popular lightweight development tool, widely popular among both before and after the end programmer, the plug-in library is also very rich, can be customized for the development of the configuration, and provides the function of the plug-in development, enables the open-source authors to more easily customize their own plugin, and a support remote development, etc. The immediate advantage over webStorm and Sublime, which require the purchase of the official version (although sublime doesn’t matter), is that it’s free! VsCode website address is: https://code.visualstudio.com/, developers can download the required version:

Domestic users who do not climb the wall may have a slow download problem, here the author downloaded the domestic version at the end of the article for everyone to download.

Atom is also a free development tool, so use it to your liking. I started with Atom, but when you download the installation package, see its size, or open Explorer after using it for a long time, you might as well abandon it as I did! Here or give its official website address https://atom.io/, his interface or quite like the author.

3. Build the react project development environment

Create-react-app and Vite are used to create scaffolding tools for react engineering projects.

3.1 Create-react-app construction

NPX create-react-app < project name > Note that the project names are in the form of alphanumeric lines (for example: create-react-app.dev/docs/gettin…). , where the author uses hello-world1. After the build is successful, the console will print the following command:

Go to the project root directory CD./hello-world1

If the dependency is not successfully installed during creation, manually install NPM inatall in the project root directory

Execute the command: NPM start, after successful startup, enter the url localhost:3000 in the browser, you can see the welcome interface:

3.2. Vite construction

Terminal input instruction

# npm 6.xNPM init vite@latest < project name > --template < template name ># npm 7+NPM init vite@latest < project name > -- --template >Copy the code

Here, of course, we use react as the template name and hello-world2 as the project name to build the project directory. You will notice that the project builds quickly after you type in the instructions. That is because scaffolding does not install dependencies for you by default, so go to the project directory (CD./hello-world2) and install dependencies manually: NPM install. NPM run dev: NPM run dev: NPM run dev: NPM run dev: NPM run dev: NPM run dev: NPM run dev: NPM run dev: NPM run dev

This is the end of the environment configuration if you just want to develop a project quickly. The following content is optional, but if you feel that dependency installation is slow, or if you need to manage different versions of Node, you can continue reading below.

4. How to rely on the installation (optional)

In the previous section, the author mainly used NPM install to install dependencies, but sometimes, especially if the network is not good, dependencies will not be installed correctly, resulting in installation errors. At this point, you may need to take the next step.

4.1 NPM domestic image configuration

Domestic NPM mirror image can bypass the trouble of being surrounded by walls. The author recommends Taobao’s mirror image. You can execute the command: NPM install – g CNPM, registry=https://registry.npm.taobao.org, thus the global installed the use taobao domestic mirror CNPM instructions. Try CNPM install in the project root directory and it will be much faster. You can also configure the mirror: NPM config set registry https://registry.npm.taobao.org, so even if you use NPM installation instruction, will also go home mirror installation.

4.2 Different dependency installation strategies

Front-end engineering projects rely on installation not only of the NPM approach, but also of its variants. For example, the installation speed is fast, the version can be better, unified yarn, or the PNPM can run faster. Careful readers will notice that the create-react-app setup above uses NPX instead of npm-g. The NPX command is installed by default in versions after NPM 5.2, which avoids global module installation. These different strategies will be covered in a later article, so I won’t go into too much detail here.

4.3. Use NVM to manage node versions

NVM is a mainstream of node edition management tools, and similar nodist (https://github.com/nullivex/nodist/releases). NVM is used as the guide.

4.3.1 Installation in Windows Environment

Enter the website to download link https://github.com/coreybutler/nvm-windows/releases, download the installation package of assets (at the end of the article provides the installation package).

Here you can download the Setup version directly, unzip and double-click to install. Of course, you can also choose the Noinstall version and manually configure the environment to achieve the same goal. Take the installation version as an example. The following figure shows the installation interface:

All the way next to complete the installation. The environment variables are already configured automatically. Check whether the installation is successful on the cli:

See the version notes are installed correctly!!

4.3.2 MacOS Environment Installation (Need to climb over the Wall)

Enter the official website to download the link https://github.com/nvm-sh/nvm#installing-and-updating, you can see the installation guide, we follow the official instructions to directly execute:

The curl - o - https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bashCopy the code

Instead of seeing a successful installation, you might get the following message:

Failed to connect to raw.githubusercontent.com port 443

This is due to github access problems caused by some mysterious Eastern power, We can use https://ipaddress.com/website/raw.githubusercontent.com check githubusercontent.com’s real IP, Enter githubuserContent.com to see:

We can simply find one of the following IP addresses (if not, try another) and perform the following steps:

  1. Enter the MAC host file:sudo vim /etc/hosts
  2. Appends the IP mapping at the bottom

After these two steps, try again and you can execute successfully.

The curl - o - https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bashCopy the code

If unfortunately you 叒 yi appears the following error, do not panic, should be not detected your Github account, you just need to open the Github homepage login account and retry.

Unable to access ‘github.com/nvm-sh/nvm…. ‘: LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443

At last!

The successful installation is as follows:

Don’t worry now, the global NVM directive has not been added to the environment variables, you need to add it manually. Run the sudo vim ~/. ZSHRC command (the ZSH terminal is used as an example) to add:

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
Copy the code

Then run the source ~/.zshrc configuration file.

Now try the NVM directive:

Success!

4.3.3 Basic use of NVM

We can use the NVM list command to view the list of versions of the current node

As you can see, only the default version 16.13.2 is available. If you want to install another version of Node, you don’t need to go to the Node website to download it. You can just use the NVM command to download it. NVM ls-remote (NVM lS-remote)

The versions listed are all installable, but here we can install a stable version: NVM Install Stable

As you can see, as of this writing, The stable version of Node is 17.4.0 and NVM will automatically switch to the installed version. If you want to customize the version number installation, use the directive NVM install < version number >

Here we have version 12.22.10 installed, and again the NVM List shows that there are already three versions. To switch between multiple versions, just use the command NVM use < version number > to switch with one click!

At this point, the environment configuration for the front-end engineering project is complete!

5, the attachment

Attachment list: VScode installation package, NVM installation package (WIN), Atom installation package (MAC). Download link:

Link: pan.baidu.com/s/1zD2s9UjX… Extraction code: 5DIU