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 w…


This content originally appeared on DEV Community and was authored by Ajanaku Temitope Grace

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.

Create a Azure resouce
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

Azure marketplace

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

Create Azure static web

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.

Connect your Gihub

  • 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.

Your static web 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.

Successful deployment

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

Unknown path error

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

Configure your .yml file

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


This content originally appeared on DEV Community and was authored by Ajanaku Temitope Grace


Print Share Comment Cite Upload Translate Updates
APA

Ajanaku Temitope Grace | Sciencx (2023-04-15T13:26:55+00:00) Create an Azure Static Web App in 2 mins!. Retrieved from https://www.scien.cx/2023/04/15/create-an-azure-static-web-app-in-2-mins/

MLA
" » Create an Azure Static Web App in 2 mins!." Ajanaku Temitope Grace | Sciencx - Saturday April 15, 2023, https://www.scien.cx/2023/04/15/create-an-azure-static-web-app-in-2-mins/
HARVARD
Ajanaku Temitope Grace | Sciencx Saturday April 15, 2023 » Create an Azure Static Web App in 2 mins!., viewed ,<https://www.scien.cx/2023/04/15/create-an-azure-static-web-app-in-2-mins/>
VANCOUVER
Ajanaku Temitope Grace | Sciencx - » Create an Azure Static Web App in 2 mins!. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/04/15/create-an-azure-static-web-app-in-2-mins/
CHICAGO
" » Create an Azure Static Web App in 2 mins!." Ajanaku Temitope Grace | Sciencx - Accessed . https://www.scien.cx/2023/04/15/create-an-azure-static-web-app-in-2-mins/
IEEE
" » Create an Azure Static Web App in 2 mins!." Ajanaku Temitope Grace | Sciencx [Online]. Available: https://www.scien.cx/2023/04/15/create-an-azure-static-web-app-in-2-mins/. [Accessed: ]
rf:citation
» Create an Azure Static Web App in 2 mins! | Ajanaku Temitope Grace | Sciencx | https://www.scien.cx/2023/04/15/create-an-azure-static-web-app-in-2-mins/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.