How easy it is to deploy with Azure Static Web Apps

Hello amazing people 👋

Hope you all are doing well.
For me, this week was exhausting due to work, but I am really happy since I got my Microsoft Azure AI Fundamentals Certification 😀

Let's get started with the Azure Static Web Apps.

Intro:

What is Azure Static Web Apps, in Microsoft's words, "A modern web app service that offers streamlined full-stack development from source code to global high availability."

Some of the great featured I love about it is Visual Studio Code extension for local development, full repository analysis, and native GitHub workflows for CI/CD.

Deployment:

Now, lets deploy a static web app with the same.

I had a face analysis web app that is written in JavaScript and HTML.
Let's login to the Azure Portal and search for Static Web Apps:

Now, let's click on the "NEW" to get started with a new Static Web App:

You will see the following screen, where you will need to pick a Subscription and add the following details:

• Resource Group
• Name (for the app)
• Region

For deployment, we will have to authenticate with our GitHub account:

After connecting GitHub, you should be able to pick the repository and branch for deployment.

Now, in the Build Details sections, you can see how many different options you have for Build Presets:

I will be choosing custom, since its a simple HTML/JS site.
Also, I will be leaving other options blank, as I don't need them for now:

Click on the Review+Create, and that should take a few seconds to go through validation, and now you should be able to hit 'Create'

If we go to our GitHub repo, there should be a new directory:
.github/workflows/

In this directory there is a YAML file that is created by the Static Web App to handle the automatic deployments, as we make changes to the project.

And you should be able to see the Build jobs under the Action tab in the GitHub repo:

In basic terms, this mean if we make change to our website, commit and push those changes to the branch or if we merge a pull request to the branch it will be deployed and we won't have to do anything manually. The GitHub action setup by Static Web App will take care of it.

Results:

Once, the Job finishes, you should be able to navigate to the URL:

And voila!

In the next blog, we will see how you can configure a custom domain and also get an SSL cert for your site.

Isn't it awesome 💜

If you have any question, feel free to reach out @rishabk7