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

Benefits of Deploying React Applications on Azure VMs

Deploy react app on azure virtual machines – FAQs

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 Ubuntu Server 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.

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.