In order for everything to work on your server, Node must already be installed.JS and Nginx. All commands will be in the description under the video To get started, create a new application using Create React App in your local environment. In the terminal, run the command to create an application Let's call this project mivo-deploy Installation may take several minutes The npx command will launch the Node package without downloading it to your computer When it is completed, you will receive a successful completion message. Your version may be slightly different if you use yarn instead of npm Following the suggestion in the output, first move to the project folder Now that you have a basic project, run it locally to check how it will be displayed on the server Run the project using the npm startup script When the command is executed, you will receive an output with information about the local server Open the browser and go to http://localhost:3000
You will be able to access the React template application Also, if you work remotely, you can simply enter the IP address of the server and add the port This will also allow you to connect Now that you have a project that runs successfully in the browser, you need to create a production build Stop the project by typing CTRL+C Run the create-react-app build script with the following command This command compiles JavaScript and resources to the build directory When the command completes, you will get some output with data about your build Note that the file names contain a hash, so your output will be slightly different At this step, you will start deploying your React application on the server Once on the server, find the configuration of your web server in /etc/nginx/sites-enabled Once you find the configuration file, display the output in your terminal with the following command If your site does not have an HTTPS certificate, you will get a result similar to this Now that you know the location of the file that Nginx will serve, you can upload your build. The format of the command will be scp files_to_copy username@server_ip:path_on_server . The first argument will be the files you want to copy. In this case, you copy all the files in the build directory. The second argument is a combination of your credentials and the destination path. The destination path will be the same as the root in your Nginx configuration: /var/www/your_domain/html. Confirm the data upload by entering YES Also enter your account password When you run the command, you will get an output showing that your files have been downloaded. Your results will be slightly different When the command completes, you are done Since the React project is built from static files that only need a browser, you don't need to configure any additional server language. Open a browser and navigate to your domain name. When you do that, you will find your React project At this step, you have deployed the React application on the server. You learned how to identify the root web directory on your server and copied the files using scp If you have any questions, leave them in the comments
