How to Deploy React App using Azure Static Web Apps ?

Microsoft Azure is a public cloud computing platform. It provides a lot of cloud services to access, manage, and deploy applications. Where as Azure Static Web App is one of the services of Microsoft Azure. It automatically builds and deploys full-stack web apps from the code repository to azure.

In this article, we will learn how to deploy React app in Azure Static Web Apps.

Steps to Deploy React App using Azure Static Web Apps

Requirements:

1. GitHub Account
2. Microsoft Azure account
3. Node.js
4. create-react-app package

Step 1: Install Node.js. You can skip this step, if already installed.

node --version

Step 2: Install create-react-app. Run the following command to install the create-react-app package globally on your PC. You can skip this step, if already installed.

npm install -g create-react-app

Step 3: Create React application

• Open the terminal in the folder where you want to create React app.
• Run the following commands one by one to create react app.

create-react-app react-app-static-web-app
cd react-app-static-web-app
npm start

• Here “react-app-static-web-app” is the name of our react application.

• “cd react-app-static-web-app” will navigate the terminal to the newly created “react-app-static-web-app” folder.
• The “npm start” command will start the local server.

• Now, the React app is running at http://localhost:3000/
• Copy and paste the link in the browser to open the React app.

Running on localhost

Step 4: Create a GitHub repository to store the react application

Step 5: Commit local files to the GitHub repository

• Run the following commands to commit files to your GitHub repository.
• Note: Replace <replace with repo> with your repository.

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/<replace with repo>.git
git push -u origin main

Note: Make sure you have installed and authorized it on your PC.

Step 6: Open Microsoft Azure Static Web App. Sign in with your login credential.

• Search for ” static web app ” in the search bar of the azure home page.

Step 7: Create a Static Web App

• Project Details

1. Select subscription.
2. Create a new or select an existing resource group.
3. Enter the name of your application.
4. Select plan and region.

• Deployment Details

1. Select the repository source. In this case, GitHub is a source.
2. Sign in with your GitHub account
3. Select the Organization, Repository, and Branch of your React app.

• Build details

1. Select React for Build Presets.
2. Leave the rest of the things default.

• Click Review + create.

1. Verify the summary and click create.
2. Wait for the app to be deployed.

Step 8: Navigate to the GitHub repository

• Click Actions.
• Wait until the progress completion.

Step 9: Return back to azure

• Come back to the Azure Static Web App Deployment page.
• Click Go to resource on the deployment page.

Step 10: Explore the URL (output)

Click on the URL and check the working condition.