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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay