How to Deploy React App on Azure Virtual Machines?

In this article, we will study how we can deploy our existing React web application to Azure VM on Ubuntu Server. We will also see how to use the public IP of the Azure VM to access the React application using Nginx. For this article, you should know about setting up a VM in Azure. We will see how to deploy applications on Linux Server.

What is a React App?

React is a Javascript framework for developing and building single-page web applications in Javascript. It supports rapid development and Scalability. It is a popular framework today that allows features like state management, Dynamic loading, and Fast Deployment.

• To learn more about React refer to this - Introduction To React

What is Azure VM?

Azure VMs are computing resources that can be used for various computing applications. VM can host different OS and provides a multi-platform environment for building and running applications in Azure. Azure VMs are highly scalable and fault tolerant providing seamless performance to users.

Benefits of Deploying React Applications on Azure VMs

The following are the benefits of deploying react applications on Azure VMs:

• Azure VMs provide a simple and efficient option for the deployment of applications
• It supports high scalability and throughput. It can be scaled up or down as per requirement along with the feature of autoscaling.
• Supports different OS for deployment.
• It provides high availability and fault tolerant infrastructure for applications.

How to Deploy React Application in Azure VMs? A Step-By-Step Guide

The following steps helps in guiding you to deploy the react application in Azure VM:

Step 1: Create and Setup Azure VM

• First, we have to create an Amazon VMs instance running any UbuntuServer of your choice.
• Under Create VM on Azure give your VM a name and select Ubuntu Server as OS. Specify other options as per your choice.

• Make sure you allow HTTP traffic to the VM. You can also allow HTTPS if you want.

Step 2: Install Nodejs and Configure Project

• Now SSH to VM using username and password.

• Install the Nodejs on VM using node version manager or any other option. We will use node version manager.
• Install Node Version manager.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

• Activate NVM software by restarting the software with the following command:

source ~/.bashrc

• Install latest Nodejs using below command.

nvm install --lts

• Create alias to default version.

nvm alias default <YOUR VERSION OF INSTALLED NODEJS>

• Once the node is install upload the project to VM. You can use AZcopy or Azure Storage for uploading. For this article we will clone project from github : https://github.com/Deepcodr/react-hello-world

• Now go to source folder and install all the node modules and required packages.

npm i

• Now run and test the application using npm start.

npm start

Step 3 : Install and configure NGINX Reverse proxy

• Install NGINX on VM using below command.

sudo apt install nginx

• Switch user to root for further configuration.

sudo su

• Now lets add configuration for our VM in Nginx configuration. Go to /etc/nginx/sites-available and copy default configuration to file with name as Public IP of VM.

cp default <YOUR_PUBLIC_IP>

• Now edit the newly created file and edit the server configuration to look like below.

• Once edited save the file and create a sym link to sites-enabled folder using below command.

ln -s /etc/nginx/sites-available/<YOUR FILE NAME> /etc/nginx/sites-enabled/

• Finally restart the service.

systemctl restart nginx

Step 4 : Test the application

• Now to test the application go to browser and enter your ip address and hit the url

• If you see the result page then cofiguration is successful.