Articles → MICROSOFT AZURE → Static Web Apps In Azure

Static Web Apps In Azure

In this article, we will discuss static web apps in Azure.

Purpose

The static web apps service allows you to host the static websites created in different front-end technologies like react, Vue etc.

Steps

For implementing the static web apps, we will work on the following steps: -

Create a React project
Upload the project on GitHub
Create the static web app
Output

So, let’s get started.

Create A React Project

First, create the sample react application.

Upload The Project On Github

Upload the project on GitHub repository.

Picture showing uploading the project on GitHub

Click to Enlarge

Create The Static Web App

In the Azure portal, search for the "Static Web App" service.

Picture showing the Static Web App service in the search result of the Azure portal

Click to Enlarge

In the Static web app screen, click on the "+Create" button.

Picture showing the +Create button for creating the new static web app

Click to Enlarge

On the create static web app screen, enter the following information.

Field	Value
Resource Group	RG1
Name	MyFirstStaticWebApp
Plan type	Free: For hobby or personal projects

Picture showing the Create static web app screen for creating the new static web app

Click to Enlarge

Scroll down to the "Deployment details" section. Select "Source" as "GitHub". Click on the "Sign in with GitHub" button.

Picture showing the Deployment details section to select the GitHub repository

Click to Enlarge

A popup window will appear for authorizing Azure Static Web App to access GitHub.

Picture showing the screen to authorize static app to access GitHub

Click to Enlarge

Click on the "Authorize Azure-App-Service-Static-Web-Apps" button. Once the authorization is done, select "Organization", "Repository" and "Branch" fields in the static web app screen.

Picture showing the GitHub repository is selected while creating the static website

Click to Enlarge

Scroll down further to the "Build Details" section. In the "Build Details" section, select "Build Presets" as "React". Without changing any other field, click on the "Review + create" button.

Picture showing the build details section while creating the static app

Click to Enlarge

The review screen will appear.

Picture showing the review screen of static app

Click to Enlarge

Click on the "Create" button to complete the static web app creation.

Output

Once the static web app is created, the build will start on GitHub. You can check the message shown in the image below.

Picture showing the message that specifies that the GitHub build is in progress

Click to Enlarge

Once the build is completed, click on the "URL" field (in the image above). You can browse your react website.

Picture showing the output of Static Web Apps In Azure

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Sunday, June 26, 2022

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**