Deploying react web application in the cloud server

Below are the steps involved in deploying react app in the cloud server.

1. Creating a react app build folder
2. Updating back end service url in the build folder
3. Copy build folder to the production server
4. Connect to production server
5. Link react build folder app to nginx server
6. Access react app from browser to test

Note: I have done this process for Digital Ocean, but process is same for almost all cloud services.

Lets take each step in detail.

1. Create react app build folder

• Create a build folder by running npm run build
• It will create build folder int he current directory
• We will this build as static files folder

2. Updating back end services URL

• Normally when we are testing in the Dev environment, we will use localhost for testing back end services.
• This will not work for the production app
• Need to update production back end services url in the build folder.
• The build folder structure looks like below

React web app build folder structure

• Open build/static/js/main.8f02701d.js file. In your case it will be different instead of 8f02701d in the file name
• Search for localhost or 0.0.0.0 or port number you are testing in your local setup, Looks like below.

• Replace that localhost:8000 or 0.0.0.0:8000 with back end services url

3. Copy build folder to the production server

• Copy this created build folder to prod server using commands like scp or rsync
• Below is the syntax for scp command
  scp -r build user_name@prod_ip_address:path_to_build_folder
• Below is the screenshot after copying to prod server

React web application build files

4. Connect to the production server
- Connect to the production server using ssh command or you can use your preferred way to connect
- Syntax for ssh command ssh user_name@prod_ip_address

5. Link react app build folder to the nginx server

This is very important step, You cant access the application if this step is not configured properly

• Make sure build file has appropriate permissions, if not give permission using below command.

# if 755 is not working, try with 777, but 777 is not adivasable
chmod 755 build

• Open nginx file /etc/nginx/sites-available/default
• If above file is not available, nginx server is not intalled in the server. Follow this link to setup nginx server.

Always take a backup before making any changes in any config or original files.

• After opening file, do two changes, One is commenting root /var/www/htm line and add root your_path_to_build_folder in the location block like below

6. Access react app from browser to test

• When you access react app, mostly you will get nginx page not found error like below

• This could be due to permission denied issue. Check the nginx error logs from the file /var/log/enginx/error.log , error should be like below.

• To fix that error, open nginx config file /etc/nginx/nginx.conf and change user name from www-data to your user name.

• After this change, restart nginx server by running this command.
  sudo service nginx restart
• This time you should able to access react application.

All these steps can be automated, but to understand in detail on how these process works, its always good to follow manual process before going for automation.

Happy Learning!!!