Step-by-Step Guide: How to Deploy a React App on Azure

Deploying a React application on Microsoft Azure is a reliable way to host your web app. In this guide, we will walk you through the steps required to get your React app up and running on Azure using Azure App Service. By the end of this tutorial, you will have a live React application hosted on Azure.

Prerequisites

Before we begin, make sure you have the following installed on your local machine:

• Node.js and npm
• Git
• Azure CLI

Step 1: Create a React App

If you don't already have a React app, you can create one using the following command:

npx create-react-app my-react-app
cd my-react-app

This will create a new React application in a directory called my-react-app.

Step 2: Initialize a Git Repository

Navigate to your React app directory and initialize a Git repository:

git init
git add .
git commit -m "Initial commit"

Step 3: Set Up Azure Account

Log in to your Azure account using the Azure CLI:

az login

If you don't have an Azure account, you can create one at Azure Portal.

Step 4: Create an Azure App Service

Create a new Azure App Service plan and web app:

az group create --name myResourceGroup --location eastus
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku FREE
az webapp create --name my-react-app --resource-group myResourceGroup --plan myAppServicePlan

Replace myResourceGroup, myAppServicePlan, and my-react-app with your desired names.

Step 5: Configure Deployment

Configure your Azure web app for deployment from a local Git repository:

az webapp deployment source config-local-git --name my-react-app --resource-group myResourceGroup

This command will provide you with a Git URL for your Azure web app.

Step 6: Add Azure Remote

Add the Azure remote to your Git repository:

git remote add azure <GIT_URL>

Replace <GIT_URL> with the Git URL provided in the previous step.

Step 7: Build Your React App

Build your React app for production:

npm run build

This will create a build directory with the production build of your app.

Step 8: Deploy to Azure

Deploy your React app to Azure by pushing your code to the Azure remote:

git add -A
git commit -m "Deploy to Azure"
git push azure main

Azure will build and deploy your application. Once the deployment is complete, you will see a message indicating that your app is live.

Step 9: Open Your App

You can open your deployed React app in your browser by navigating to the URL provided by Azure. This will open your app's URL in your default web browser.

Conclusion

Congratulations! You have successfully deployed your React app on Microsoft Azure. In this guide, we covered the steps to create a React app, initialize a Git repository, set up an Azure account, create an Azure App Service, configure deployment, build your React app, and deploy your app to Azure. Now you can share your live React application with the world.

If you encounter any issues or have any questions, feel free to refer to the Azure documentation or the React documentation. Happy coding!