DEV Community

Brandon Allmark
Brandon Allmark

Posted on

Cloud Resume Challenge pt 4: Spinning up an Azure Static Web App

A nice and easy one this week. Today is a quick run through on how I configured my static web app to deploy straight from GitHub.

We're also doing all of this from the cozy embrace of ClickOps! So put on some jazz, kick up your feet and let's get started!

1. Create a new Repo for your website.

The below settings keep it simple. Set to private if preferred.

asd

2. Spin up your Static Web App, select the repository you've just created.

If you're in a private tab, you'll need to log into GitHub.

Image dssdsaaescription

3. Head over to your repo and click on the Actions button.

Image sadasddescription

4. You'll notice your first run has failed.

If we dig down we'll find its due to a missing index.html file.

This can be avoided by pre-loading your repo with your index.html file before we connect it to the SWA but... even if we're doing things the easy way today, its still good to see what a fail looks like.

Image desasdfafcription

5. Fix this by uploading your index.html
Image descripasdftion

This will trigger the workflow to start another deployment. Give it a few moments and it should go from a yellow pending state to a green tick!

Image descriptsssion

6. Return to your Static Web App resource

You'll notice your website's status has gone from Waiting for Deployment to Ready

Image deasdasdscription

7. Click on Visit Your Website and you can see its already up!

Imagea asdasd

And while we're riding this Victorious Wave, you'll notice we're already setup for HTTPS! This'll stay secure even after adding your own custom domain.

Image descriptasdsdion

Bonus:
Azure Static Web apps support preview environments by default. To use them, perform a pull request instead of a commit. The workflow will then deploy a preview environment.

Image asdasd

Top comments (0)