Create React App – How to Create and Deploy a React Application to Production

create react app

React is an open-source JavaScript library developed by Facebook used for creating web frontend and UI components. It is often used for developing Web Applications or Mobile Apps. With React, you can create reusable components that are independent of each other. You can also use React with other libraries including, Axios, JQuery AJAX or the browser built-in window.fetch.

You will learn the following –

In this post, we will show you How to Deploy a React Application to Production.

Prerequisites

  • A server running Ubuntu 20.04.
  • A valid domain name pointed with your server
  • A root password is configured on your server.

If you want to host React App on Cloud or VPS and don’t know how to choose the best Cloud and VPS hosting provider. You can read my guide on 13 Best “Cheap VPS Hosting” and “Cloud Hosting” Providers – 2021.

Step 1 – Install NPM and Node.js

First, you will need to install Node.js and NPM in your system. First, install the required dependencies using the following command:

apt-get install curl gnupg2 git build-essential wget -y

Next, add the Node Source repository with the following command:

curl -sL https://deb.nodesource.com/setup_14.x | bash -

Once the repository is added, install the Node.js by running the following command:

apt-get install node.js -y

After installing Node.js, verify the Node.js version with the following command:

node -v

You should see the Node.js version in the following output:

v14.16.0

At this point, NPM and Node.js are installed in your system.

Step 2 – Install Create React App

Before starting, you will need to install create-react-app in your system. It is a command-line utility used to create a React Application. You can install it using the NPM as shown below:

npm install -g create-react-app

Once installed, verify the installed version of create-react-app using the following command:

create-react-app --version

You should see the following output:

4.0.3

Step 3 – Create a React App

Next, create your first React app with the following command:

cd /opt
create-react-app myapp

You should see the following output:

Success! Created myapp at /opt/myapp
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd myapp
  npm start

Happy hacking!

Next, change the directory to myapp and start the application with the following command:

cd myapp
npm start

Once the application has been started successfully, you should get the following output:

Compiled successfully!

You can now view myapp in the browser.

  http://localhost:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Now, press CTRL+C to stop the application.

Step 4 – Create a Systemd Service File for React App

Next, it is a good idea to create a systemd service file to manage the React service. You can create it with the following command:

nano /lib/systemd/system/react.service

Add the following lines:

[Unit]
After=network.target

[Service]
Type=simple
User=root
WorkingDirectory=/opt/myapp
ExecStart=/usr/bin/npm start
Restart=on-failure

[Install]
WantedBy=multi-user.target

Save and close the file then reload the systemd daemon with the following command:

systemctl daemon-reload

Next, start the React service and enable it to start at system reboot with the following command:

systemctl start react
systemctl enable react

Next, verify the status of the Reactjs app with the following command:

systemctl status react

You should get the following output:

● react.service
     Loaded: loaded (/lib/systemd/system/react.service; disabled; vendor preset: enabled)
     Active: active (running) since Fri 2021-03-26 13:56:09 UTC; 5s ago
   Main PID: 11137 (node)
      Tasks: 30 (limit: 2353)
     Memory: 194.8M
     CGroup: /system.slice/react.service
             ├─11137 npm
             ├─11158 sh -c react-scripts start
             ├─11159 node /opt/myapp/node_modules/.bin/react-scripts start
             └─11166 /usr/bin/node /opt/myapp/node_modules/react-scripts/scripts/start.js

Mar 26 13:56:09 ubuntu2004 systemd[1]: Started react.service.
Mar 26 13:56:10 ubuntu2004 npm[11137]: > [email protected] start /opt/myapp
Mar 26 13:56:10 ubuntu2004 npm[11137]: > react-scripts start
Mar 26 13:56:12 ubuntu2004 npm[11166]: ℹ 「wds」: Project is running at http://0.0.0.0:3000/
Mar 26 13:56:12 ubuntu2004 npm[11166]: ℹ 「wds」: webpack output is served from
Mar 26 13:56:12 ubuntu2004 npm[11166]: ℹ 「wds」: Content not from webpack is served from /opt/myapp/public
Mar 26 13:56:12 ubuntu2004 npm[11166]: ℹ 「wds」: 404s will fallback to /
Mar 26 13:56:12 ubuntu2004 npm[11166]: Starting the development server...

At this point, React service is started and listening on port 3000. You can verify it with the following command:

ss -antpl | grep 3000

You should get the following output:

LISTEN    0         511                0.0.0.0:3000             0.0.0.0:*        users:(("node",pid=11166,fd=19))                                               

Once you are finished, you can proceed to the next step.

Step 5 – Configure Nginx as a Reverse Proxy For React App

Next, you will need to configure Nginx as a reverse proxy to access the React app using port 80. First, install the Nginx package with the following command:

apt-get install nginx -y

Once the Nginx is installed, create a new Nginx virtual host configuration file with the following command:

nano /etc/nginx/conf.d/react.conf

Add the following lines:

server {
    listen 80;
    server_name react.linuxbuz.com;

    location / {
        proxy_set_header   X-Forwarded-For $remote_addr;
        proxy_set_header   Host $http_host;
        proxy_pass         http://localhost:3000;
    }
}

Save and close the file when you are finished then verify the Nginx for any syntax error with the following command:

nginx -t

You should get the following output:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Finally, restart the Nginx service by running the following command:

systemctl restart nginx

Step 6 – Secure React App with Let’s Encrypt Free SSL

It is also a good idea to secure your React App website with Let’s Encrypt Free SSL. You will need to install the Certbot client package to install and manage the Let’s Encrypt SSL. Run the following command to install the Certbot package:

apt-get install python3-certbot-nginx -y

After installing the Certbot client, run the following command to download Let’s Encrypt SSL and configure Nginx to use the downloaded SSL.

certbot --nginx -d react.linuxbuz.com

You will be asked to provide your valid email address and accept the term of service as shown below:

Saving debug log to /var/log/letsencrypt/letsencrypt.log
Plugins selected: Authenticator nginx, Installer nginx
Enter email address (used for urgent renewal and security notices) (Enter 'c' to
cancel): [email protected]

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Please read the Terms of Service at
https://letsencrypt.org/documents/LE-SA-v1.2-November-15-2017.pdf. You must
agree in order to register with the ACME server at
https://acme-v02.api.letsencrypt.org/directory
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(A)gree/(C)ancel: A

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Would you be willing to share your email address with the Electronic Frontier
Foundation, a founding partner of the Let's Encrypt project and the non-profit
organization that develops Certbot? We'd like to send you email about our work
encrypting the web, EFF news, campaigns, and ways to support digital freedom.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(Y)es/(N)o: Y
Obtaining a new certificate
Performing the following challenges:
http-01 challenge for react.linuxbuz.com
Waiting for verification...
Cleaning up challenges
Deploying Certificate to VirtualHost /etc/nginx/conf.d/react.conf

Next, you will need to choose whether or not to redirect HTTP traffic to HTTPS:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate number [1-2] then [enter] (press 'c' to cancel): 2

Type 2 and hit Enter to start the installation. Once the installation has been completed, you should see the following output:

Redirecting all traffic on port 80 to ssl in /etc/nginx/conf.d/react.conf

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Congratulations! You have successfully enabled https://react.linuxbuz.com

You should test your configuration at:
https://www.ssllabs.com/ssltest/analyze.html?d=react.linuxbuz.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/react.linuxbuz.com/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/react.linuxbuz.com/privkey.pem
   Your cert will expire on 2020-10-30. To obtain a new or tweaked
   version of this certificate in the future, simply run certbot again
   with the "certonly" option. To non-interactively renew *all* of
   your certificates, run "certbot renew"
 - Your account credentials have been saved in your Certbot
   configuration directory at /etc/letsencrypt. You should make a
   secure backup of this folder now. This configuration directory will
   also contain certificates and private keys obtained by Certbot so
   making regular backups of this folder is ideal.
 - If you like Certbot, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le

 - We were unable to subscribe you the EFF mailing list because your
   e-mail address appears to be invalid. You can try again later by
   visiting https://act.eff.org.

Step 7 – Verify React Application

Now, your React App is hosted with an Nginx web server and secured with Let’s Encrypt SSL. You can access it using the URL https://react.linuxbuz.com. You should see your React App page on the following screen:

react app dashboard

About Hitesh Jethva

I am Hitesh Jethva Founder and Author at LinuxBuz.com. I felt in love with Linux when i was started to learn Linux. I am a fan of open source technology and have more than 15+ years of experience in Linux and Open Source technologies.

View all posts by Hitesh Jethva