Tutorial: How to deploy Node.js Express to Azure Web Apps and React to Static Web Apps

Short tutorial with Azure quirks explained to quickly get you started with deploying your Node.js and React apps to Azure

Photo by Rod Long on Unsplash

Embarking on the journey of deploying Node.js Express and React applications to Azure can be both exciting and daunting, especially for beginners. Azure offers a robust platform for hosting web applications, but navigating its features and quirks can sometimes feel overwhelming.

In this short tutorial, we’ll walk you through the process of deploying your:

1. Node.js Express backend to Azure Web Apps
2. React frontend to Static Web Apps

Step 1: Deploy Node.js application to Azure Web Apps via Github Actions

We’ll be deploying the following repository I talked about in the previous article where I built the backend for connecting with Azure SQL Managed Instance.

GitHub - urosran/azure-sql-chat-gpt-backend

Firstly, let’s login to Azure and search for App Services, once there click create and choose Web App:

Once created, on the left pane select Deployments:

error before the fix

I ran into an issue where I had to create a Managed Identity and then go to my administrator to get assigned a role of Website Contributor role assigned to that particular Managed Identity.

Once you do get a fix, big red box will stay but saved button will not be grayed out anymore:

Click deploy and wait for the deployment to fail.

Go to Environment variables and add the contents of your .env file:

Now you can pull the updated code (github actions will add a file to the repo) to your local repository. The .yml file will be in .github folder, under workflows. You will open that file in my case main_azure-sql-chat-gpt-backend.yml go to line 25 and remove npm run test — if-present. Your final version should look something like this:

Push the changes and your web app should be deployed and fully operational. From the overview page, you can click on the link on the right hand side (default domain: https://…azurewebaps.com)

Step 2: Deploy React app via Azure Static Web Apps and GitHub Actions

We’ll be deploying the following repository I talked about in the previous article where I built the backend for connecting with Azure SQL Managed Instance.

GitHub - urosran/azure-sql-chat-gpt-frontend

Firstly, let’s login to Azure and search for App Services, once there click create and choose Static Web App and click create:

Now your deployments will be failing and we need to change the github actions yml once again, follow the same steps (git pull) and add the following:

This will make sure Github Actions ignores random frontend warnings and stop treating them as errors.

Now let’s add our .env variables to .yml so that frontend can access them:

You will add your actual value for REACT_APP_SERVER_URL in the repository settings under actions:

Now push your newly changed yml and your app should be fully operational. Go to overview and check URL field for the website url where you can see your React App.

Taaaddaaaaaaa 🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

You’ve conquered Azure!