Deploying a MERN stack application in Azure VM
Hello everyone, I’m going to show you how to deploy a MERN stack application on Azure VM. I have already created a simple React application with an Express API connected with MongoDB. I’m going to assume you have a MERN stack application ready for the deployment.
Creating the VM
Go to Microsoft Azure portal & create a new “Virtual Machine”
After creating the VM download the Remote Desktop (RDP) file & connect to the VM
Deploying the Application
Copy the deployment files into the VM & check whether application is working properly in the local environment.
I have used http://localhost:3000 for my Express back-end & http://localhost:5000 for my React front-end application.
Setup VM Networking Rules
Go to the Network tab & select “Inbound port rules”. Click on “Add inbound port rule” button & the popup will appear as follows
Keep the default values as it is. Just change the “Destination port ranges” into the ports you have used in your applications. I have created 2 rules for ports 3000 & 5000.
Setup VM Firewall
On your VM start menu search for “Windows Defender Firewall” & open it. Then click on “Advanced settings” link. When it opens click on “Inbound Rules”. This will show all the Inbound rules defined in your VM. In right side menu click on “New Rule” & follow the steps below.
Repeat these steps for the both ports.
Setup Application
In your React application, replace your API url with the IP of the VM. It should be http://<VM IP>:5000. Then restart both applications.
Finally you should be able to access your application using http://<VM IP>:<Port>
Happy Coding 😃