Skip to main content

· 7 min read
Glaucia Llemos
Nitya Narasimhan

Welcome to Week 1, Day 2 of #30DaysOfSWA!!

Yesterday we got a quick introduction to Azure Static Web Apps (what it is, how it's architected, and 10 features that make it useful to modern web developers). Today, it's time to dive to dive into Building Static Web Apps.

What We'll Cover​

  • How can I get started with SWA?
  • Using SWA with personal and production projects.
  • Building & Deploying your first SWA
  • Tutorial Let's Build a Classic Movie Crawler!
  • Exercise Your turn! And #MayThe4thBeWithYou
  • Resources: Static Web Apps Quickstarts

1. Getting Started​

The Azure Static Web Apps service makes it easy to publish your modern web application directly from its codebase. Let's walk through that process for a basic web application (HTML, CSS, JS) first, to understand the development workflow and configuration options.

1.1 Requirements​

To do this quickstart, you'll need

This approach assumes you favor using an IDE for development, and want to streamline build/deploy into that workflow. I'm a fan of Visual Studio Code so I'll use this approach. If you prefer to use the command line, or a browser, we have you covered!

1.2 Final Outcome​

The goal is to take this basic HTML/CSS/JS application and configure it for automatic build/deploy to Azure Static Web Apps. We'll be using this official quickstart which comes with a vanilla-JS application starter template that provides our base application. Feel free to be adventurous and follow these steps with your own vanillaJS codebase.

We'll clone that starter first - making GitHub our default code-hosting provider. Azure Static Web Apps has flexible deployment options so look at tutorials for BitBucket, GitLab or Azure DevOps if preferred. Watch for the Deploying SWA post later this week for more details.

VanillaJS Quickstart outcome page

So what does that vanilla-JS starter app do? Not much - it's just a simple title on a blank webpage as shown above. Here's what you'll end up with when done:

Ready to do this? Let's go!

1.3 Build Process​

The process is captured in this quickstart document and has the following steps:

  • Click to generate your vanilla-js app from the template.
  • Clone the repo to your local machine. Open in Visual Studio Code.
  • Install the Azure Static Web Apps extension in VS Code (if not present)
  • Select Azure in the Activity Bar to view Azure Extensions window. You will be prompted to log into Azure and GitHub during this workflow if needed.
    1. Select the Static Web Apps section and click "+" to start SWA setup
    2. Select the relevant Azure subscription to use
    3. Select the region to deploy to (close to you)
    4. Select the "Custom" preset - use /src as app location, leave build empty
    5. Press Enter. Watch for a pop-up notification of build status.

Once deployment completes (you should see the success notification), visit the Azure Extensions window again.Look for the project in the Static Web Apps section and right-click for options. Here are three key ones to know:

  1. Browse Site - click to see the live-deployed site
  2. Edit Workflow - click to see automated GitHub Actions setup for the SWA.
  3. Open in Portal - click to manage the SWA in the Azure Portal.

That's it!! You just deployed your first Static Web App with just a few clicks and configuration inputs! 🎉

1.4 Let's Unpack​

So what happened under the hood?

If you look at your codebase you'll see one key change - the Azure SWA service sets up the GitHub Actions workflow for you, directly in the repo using your GitHub credentials. No manual steps needed from you!

The workflow automates the build/deploy process on both code commit (push) and contribution (pull request) events. So when you make changes to your application code, it triggers the workflow to automatically rebuild and deploy the updated Static Web App. 🙌🏽

1.5 Video Tutorial​

Want to see a video walkthrough of the process? Check out this 2-minute Azure Static Web Apps: Tips & Tricks video from 2021. It features a different vanilla-JS application but follows the same "Quickstart with Visual Studio Code" steps so you can see them in action!

2. "There is No Try!"​

You realize today is May 3rd, right? That means tomorrow is May 4 - and what better way to celebrate our favorite movie call-to-action (MayTheFourthBeWithYou) than to pay homage with our own custom crafted movie banner sharing our origin story.

Build a crawler with Azure Static Web Apps

Try out this 3-part tutorial to take the basic HTML/CSS/JS application to the next level - and recreate the iconic introduction from the classic Star Wars franchise. Just do the thing!

  1. Part 1: Create basic page and style it with HTML/CSS
  2. Part 2: Bring moving banner to life with JS
  3. Part 3: Use Visual Studio Code to deploy to Static Web Apps

Please Note: The tutorial is meant only to illustrate the creation of the banner with CSS/JS/HTML and celebrate an iconic movie on an iconic date! The movie logo, music and other iconic elements remain the property of relevant copyright holders and should not be used without permission.

3. Let's Talk Plans!​

The Azure Static Web Apps service comes with two plans - a Free plan that is perfect for Personal projects, and a Standard (paid) plan that is more appropriate for apps deployed in production. Check out the Features Comparison to judge what plan is best for you.

My personal experience is that, as an individual developer, the free tier is sufficiently generous to explore ideas and host prototypes (for real-world users) or demos (for validating ideas). The free tier also comes with Managed Functions support (to integrate a serverless API capability) out of the box. You will need the Standard plan if you want to "Bring your own functions" instead. For the most part, you should be able to try out all the Exercises in #30DaysOfSWA using the Free tier.

4: Exercise​

If you followed along with the quickstart, you should have setup and deployed your first Azure Static Web App using a vanilla-JS starter. Now, time to challenge yourself by trying out one (or both) of these options:

  • Complete the other quickstart tutorials - using Azure CLI and Azure Portal - to get a sense of how the workflows differ. And join the #SWAanniversary event to learn more about SWA CLI for local development.
  • Build your own movie crawler - follow Glaucia's tutorial to have the default banner running on Azure Static Web Apps - then customize the words to suit your origin story and share it on May 4th (StarWars Day) - and MayThe4thBeWithYou!.