Rishab Kumar
Rishab in Cloud

Rishab in Cloud

How easy it is to deploy with Azure Static Web Apps

How easy it is to deploy with Azure Static Web Apps

Rishab Kumar's photo
Rishab Kumar

Published on Mar 21, 2021

4 min read

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

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.

image.png

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:

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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:

image.png

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'

image.png

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

image.png

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.

image.png

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

image.png

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:

image.png

And voila!

image.png

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

ย 
Share this