Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "the method of packaging and deployment of React project". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Create-react-app

From the official zero configuration command line tool of Facebook. Create-react-app is a zero configuration command line tool from Facebook, which can help you automatically create the easiest React project template based on Webpack+ES6, and help beginners get started quickly. The way to install create-react-app is also very simple, you can directly use the npm command for global installation. Npm install-g create-react-app

Create-react-app my-app

Cd my-app/

Npm start

Reference link: http://www.tuicool.com/articles/Qn6ZnqU

Packaging and compilation

After executing the above command, open the local browser, type localhost:3000, and you can see the running effect of the project. This is the development mode.

If you use npm run build, the code is compiled to the build directory. Package and release the whole application, and automatically try webpack for compression and optimization.

Under the project path, click npm run buil, and the build folder appears, and the terminal displays these words:

D

It roughly means: it has been compiled. These things generated by build should be placed under the server root, and can be rewritten in pakege.json according to the example in the green word.

You can also make it act as a static server, knock: npm install-g serve, hit serve-s build, and that's fine.

Tencent Cloud

One of the pitfalls is that when Tencent Cloud sets a password, the combination of letters and numbers is fine, if it has to be added? A character like this, because you can only enter it by holding down shift? Character

When logging in, the password entered will be inconsistent with the set password, resulting in unable to log in. .. The problem has been solved for a long time.

Step 1: purchase Tencent Cloud services without much introduction

Step 2: download filezilla, click File-> site Manager, and log in to the CVM. As shown in the figure:

After logging in, there are local files on the left and those on the server on the right. Select a folder to upload and you can upload it to the server.

On the server, you should also configure the environment. The most basic thing is to install node and npm. There are many tutorials, so I won't repeat them here. Several blog posts are attached to thank the original author for sharing:

Nodejs installation and version upgrade under ubuntu: http://blog.csdn.net/lss_csdn/article/details/52165652

After we transfer the build folder to the server, then on the server's command line, go to the build folder, directly type: serve-s, and start the project. The external network can also be accessed.

Easy to make mistakes: either enter the build folder and click serve-s, or one level above the build directory, click serve-s build. Can make the compiled react project run correctly.

If you hit serve-s one level above the build directory, a page like this will appear when you visit localhost:5000:

It is equivalent to taking the current directory as the server root directory.

If you type serve-s build in build, there will be an error without build folder because it is already in build:

Some miscellaneous:

Local terminal login server: ssh user name @ server extranet name. For example: ssh ubuntu@123.206.92.245

Then enter the password without echo. Note that you must have ssh installed and Administrator permission to log in. I use this to configure ssh under windows. Just click on the next step:

This is the end of the content of "the method of packaging and deployment of React project". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.