GitHub Actions + Vanilla JS Bootstrap + Azure Web App

Photo by Vijayasimha BR on Unsplash

Right then, this month, I am teaching deployment to my ongoing tutoring batches.

as always, I have a couple of ready to see demos, here.

GitHub - Jay-study-nildana/GitHubActionsBasics: GitHub Actions for first time learners with HTML…

GitHub - Jay-study-nildana/P5JSForStudents: Contains my practice and teaching code related to P5.JS

So, decided to blog it. First up, we need to create a brand-new GitHub repository. public or private, it should not matter.

Next, we go ahead and create a ‘workflow’ folder. it looks like, this.

.github/workflows

now, inside that, you put something like this, in an yaml file. you can give whatever name you want. for example, ‘azure-staticwebapp.yml’.

now, that might too look intimidating, but, if you simply read it, line by line, patiently, it actually makes a whole lot of sense.

In a nutshell, you see a whole bunch of automation that replaces the number of steps you might do by hand, when deploying a static site.

Here, the main, item, is.

secrets.AZURE_STATIC_WEB_APPS_API_TOKEN

You need to arrange for it, in the settings of your GitHub repository.

from one of my github actions enabled repositories.

Obviously, you need to get this secret from Azure Web App. How to get that token? well, I refer you, to the following article.

Reset deployment tokens in Azure Static Web Apps

After that, just go ahead and do the usual things.

1. create a branch. (optional)
2. pull request and merge code to main branch (if you worked on separate branch).
3. make changes and commit the changes.

In all these scenarios, GitHub Actions will be triggered and you can see the app being deployed in the ‘Actions’ section of your repository. Simple.

another screen shot from one my repos.

And, that’s actually it. These days, it’s very simple.

I work as a full-time freelance coding tutor. Hire me at UpWork or Fiverr or Stack Overflow or GitHub. see my personal website. see my photography art hobby at Behance and Unsplash and ArtStation. Also, podcast about life. podcast about movies. and Twitch. and YouTube Channel. If you are a student, join my discord server.