1. Install the React Developer Tools (Chrome, React Developer Tools) to verify whether the build process is correct, as shown in Figure 1.
2. When you visit a React page in development mode, this tool’s icon will have a red background, as shown in Figure 2.
This page is using the development build of React.
Note that the development build is not suitable for production.
Make sure to use the production build before deployment.
Open the developer tools, and the React tab will appear to the right.
This page is using the development build of React.
Note that the development build is not suitable for production.
Make sure to use the production build before deployment.
Open the developer tools, and the React tab will appear to the right.
3. Create React App method: If your project was created with Create React App, run the following command. This will create a production build of the app in the project’s build/ folder, as shown in Figure 3.
npm run build
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
35.72 KB build\static\js\main.ee7b2412.js
299 B build\static\css\main.c17080f1.css
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
http://bit.ly/2vY88Kr
4. Edit the hosts file, as shown in Figure 4.
# React my-app
127.0.0.1 my-app.localhost www.my-app.localhost
5. Deploy on Nginx to serve index.html. Create a new file: C:\nginx-1.10.1\conf\vhosts\my-app.conf, as shown in Figure 5.
## WWW ##
server {
listen 80; ## 监听 ipv4 上的 80 端口
# listen [::]:80 default_server ipv6only=on; ## 监听 ipv6 上的 80 端口
root E:/wwwroot/my-app/build;
index index.html;
server_name www.my-app.localhost;
charset utf-8;
access_log logs/www.my-app.localhost.access.log;
error_log logs/www.my-app.localhost.error.log;
# location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|pdf|ppt|txt|bmp|rtf|js)$ {
# access_log off;
# expires max;
# }
client_max_body_size 128M;
# There is a VirtualBox bug related to sendfile that can lead to
# corrupted files, if not turned-off
# sendfile off;
location ~ /\.(ht|svn|git) {
deny all;
}
}
## MISC ##
### WWW Redirect ###
server {
listen 80; ## 监听 ipv4 上的 80 端口
# listen [::]:80 default_server ipv6only=on; ## 监听 ipv6 上的 80 端口
server_name my-app.localhost;
return 301 http://www.my-app.localhost$request_uri;
}
6. Reload Nginx by running the command: nginx -s reload, as shown in Figure 6.
7. URL: http://www.my-app.localhost/ . When you visit a React page in production mode, this tool’s icon will have a black background, as shown in Figure 7.
This page is using the production build of React.
Open the developer tools, and the React tab will appear to the right.
This page is using the production build of React.
Open the developer tools, and the React tab will appear to the right.
