Create an Azure Static Web App in 2 mins!

If you have used Netlify and Vercel before and found them simple, you might be pleasantly surprised by the experience offered by Azure Static Web Apps. This service provides automatic deployment for web applications, allowing you to deploy full-stack web apps using a variety of sources such as Github, Azure DevOps, and others.

In this article, we will focus on using Github as the source for creating an Azure Static Web App. So, let's dive in!

Step 1: Create your Azure account

Don't have an Azure account yet? Not to worry, you can easily create a free account by clicking here and selecting the "Start free" option. Simply follow the prompts and you'll be in the Azure portal in no time!

Step 2: Create Azure static web app
I know that's why you are here. In your Azure portal, select the Create resource.

This will take you to Azure market place. Make use of the search field and search web app. You have various results like in the image below

Alot of possibilities we have there. Our focus is the Static web app so select Create static web like so

Creating a resource group is required. If you have a resource group you have created previously, you can select it in the drop down else create a new one.

Next is to complete your static web details. This include;

• Name: You can use any name you want here. Ensure you follow the validation. Special characters are not allowed!
• Plan: You have two options here, Free and Standard. If you are deploying a personal project, free is the plan for you. If you have a production web app, you might want to explore the standard plan.
• Azure Staging details: We follow the rule in creating virtual machine. Always select a region close to your customer!
• Deployment details: You have three options here, Github/Azure Devops/Other. As mentioned earlier, we will use Github

Step 3: Connect your Github

This is easy. Allow access to your Gitub simply by selecting Github and completing Github authorization.

• Select the organization you have your repository (if you have multiple organizations on Github)
• Select your project repository
• Select a branch. Make sure this is the branch with the changes you want to deploy.

Review your details and create your static web app. Once your deployment is complete, you can now go to your resource overview.

You can see your url. If clicked, it might still be empty. This is because your Github action is still in progress. You can inspect this.

What happens if my workflow fails?
I thought you won't ask. A common error can be seen in the image below.

This is most times because of the app_location: "/" # App source code path in your azure-static-web-apps.yml file. By default, Azure uses / for file path. If like me, you have your files in a src folder, you might want to change the app_location to this app_location: "/src" # App source code path. Push your changes and see your workflow run again.

The beauty of Azure static web service is that, your application deploys automatically after every push or pull request. ofcourse you can also configure this in your .yml file

If you find this helpful, please follow and let's grow together!