How to deploy a website with Azure Static Web Apps Service
Published: 2021-04-25 10:05:54

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](https://pages.github.com/), 
[Netlify](https://www.netlify.com), [Digital Ocean](https://www.digitalocean.com), and [Microsoft Azure](https://portal.azure.com/) recently released <strong> <em> Azure Static Web Apps</em></strong> and it’s in the preview mode. 

And we'll be looking at the <strong> <em> Azure Static Web Apps</em></strong> in this post.

---

## Prerequisites
* Firstly, a [GitHub](https://github.com/) account and an [Azure](https://portal.azure.com/) 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](https://portal.azure.com/) and sign in with your account.

Your Dashboard will look something like this:
![Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xe8ja6mjnttvvn6eg4qu.png)

2) Select <strong>Create a resource</strong>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sbz57c63460cibj212u1.png)

3) Search for Static Web Apps and select <strong>Static Web Apps (Review)</strong> from search results.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4kz57im1i8w9eajjygid.png)

4) Now, you'll be on a page like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/an0wyhwtb2p79pbuv9iu.png)

5) Select <strong>Create</strong>

Now, config your app by entering all the details in the <strong><em>Basics</em></strong> Section.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4dlv3rlqdz8mfkpro4qj.png)

1) Choose your <strong>Azure Subscription</strong>.
2) Select an <strong>existing resource group</strong> or create a <strong>new resource group</strong>.
> If you're wondering about what a resource group is, they are just like folders to organize and manage all your resources.</blockquote>3) Name your app and select a <strong>Region</strong> closest to you.
4) Authenticate with GitHub.
5) After successfully signing in, fill out repository details.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/op151xa4lge78e80j5ae.png)

> * 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 <strong>Review + Create.</strong>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wcmlfabzg22pvsx871zo.png)

7) Select <strong>Create.</strong>
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzb4n4yxzvdww8ylygo6.png)

8) After the deployment build finishes running. Select <strong>Go to the resource.<strong>
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hcfcwh9l6oicomzuio4.png)

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.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w0wjjgpissbgrxibz8dt.png)

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 ❤️