How to deploy a website with Azure Static Web Apps Service

Confused about how to deploy your web application? 🤔

If yes, then this article is for you. I'll try my best to make it simpler for you 😅

---

Introduction

There are many static site hosting services available to host your projects like GitHub Pages,
Netlify, Digital Ocean, and Microsoft Azure recently released Azure Static Web Apps and it’s in the preview mode.

And we'll be looking at the Azure Static Web Apps in this post.

---

Prerequisites

• Firstly, a GitHub account and an Azure account.
• If you don't have an existing repository with the source code of your web app, then create a new repository in your GitHub profile and push the source code.

---

Creating a static web app in Azure

1) Open Azure Portal and sign in with your account.

Your Dashboard will look something like this:

2) Select Create a resource

3) Search for Static Web Apps and select Static Web Apps (Review) from search results.

4) Now, you'll be on a page like this:

5) Select Create

Now, config your app by entering all the details in the Basics Section.

1) Choose your Azure Subscription.
2) Select an existing resource group or create a new resource group.

If you're wondering about what a resource group is, they are just like folders to organize and manage all your resources.

3) Name your app and select a Region closest to you.
4) Authenticate with GitHub.
5) After successfully signing in, fill out repository details.

• Select your preferred Organization
• Select the Repository which has the source code of your app and select main from the Branch drop-down.
• Enter the build details depending on your frontend framework.

6) Select Review + Create.

7) Select Create.

8) After the deployment build finishes running. Select Go to the resource.

9) Now click on the banner that says, Click here to check the status of your GitHub Actions runs takes you to the GitHub Actions running against your repository.

10) Once you verify the deployment job is complete, then you can navigate to your website via the generated URL.

If you want to update your app, push the changes to the repository, and GitHub actions will automate the deployment with new changes.

---

That's it for this article, I hope you found it useful ❤️