Microsoft Azure – Getting started with Azure Static Web Apps
Last Updated :
31 Mar, 2023
Azure Static Web App is a Serverless Web Application offered by Azure to host Static Site Content like Images, Videos, and Code files like HTML, CSS, JavaScript, Markdown, Text files, JSON, XML files with high efficiency and it is pre-rendered content is distributed globally.
No Web Services are required for deploy so it is cost-effective. So no need to worry about the maintenance of the server.
Let’s get started by creating a Static Web App in Azure. Follow the Step to get started by creating a one.
Process 1 using Other Deployment Source
Step 1: Open your browser and go to https://portal.azure.com/
Step 2: Log in to your Microsoft Azure Subscription Account.
Step 3: Once you logged in Search for “Static Web Apps” and select the service.
Step 4: Click on Create to create an Azure Static Web App.
- To begin with, you must select your valid active Azure subscription.
- For Resource Group you can create a New Resource Group by clicking on Create new or you can choose an existing one if you have one.
- Provide a Unique Name for your Static Web App. In my case, we have given “Static-Web-App-01”
Step 5: Choosing a Hosting Plan type. You can choose a plan from the below screenshot according to your app needs.
Step 6: For Location, you can prefer any of the supported locations from the drop-down menu.
Step 7: Choosing the Deployment Details.
Step 8: Once your deployment is Done. You can click on “Go to resource” for static web app configuration.
Step 9: Before setting up the static web app configuration. Browse to verify the live status of your site.
Step 10: The default “Static-Web-App-01” output looks like the following screenshot below –
Step 11: Mapping Custom Domain for “Azure Static-Web-App-01”
- Go to “Azure Static-Web-App-01”, from left menu Navigate to Setting >> Custom Domain >> Click on “+Add”
- Add your Custom Domain Name and Click “Next“
- After this step, you will have two options to verify the domain ownership >> Hostname record type : TXT or CNAME to Validate your Domain. (You choose either one)
Using Github Source Account:
Step 1 to Step 6: You can refer to the step from Process 1. Follow the steps as mentioned.
Note: Change the Static App Web Name as “Static-Web-App-02” (Refer Process 1 – Step 4)
Step 7: If you have your source in GitHub you can select “GitHub” and then click on “Sign in with GitHub” to Select your Source Code Repo.
Step 8: Authorize Azure Static Web Apps with your GitHub account.
Step 9: Confirm access by entering your GitHub password.
Step 10: Enter the details of your Github Organization Name or Account Name from the drop-down menu.
- Then, choose your selected source code Repository from the drop-down menu.
- Select your Branch.
Step 11: For Build Details I have selected >> Other >> Custom as we are deploying your own source code.
Step 12: Select App location root “/” and leave the rest of the steps as it is. (Refer to the below Image):
Step 13: Click on “Review + create” and once your deployment is complete. You can click on “Go to resource” for static web app configuration.
Step 14: Go to “Static-Web-App-02” and Navigate to Setting >> Environment and verify the deployment Branch and Status
Step 15: If you are not having any index file in your select Github repo, then the output looks like the be following screenshot:
Step 16: If you are having an existing index file in your select Github repo, then the output will be the following
Where we are having the index file with the following sample code.
HTML
<!DOCTYPE html>
<html>
<title>Azure Static Web App</title>
<body>
<h1>Static Web App 02</h1>
<p>This a Azure Static App Demo</p>
</body>
</html>
|
That’s it! We are done.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...