Nitya Narasimhan, Ph.DWelcome 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
About the Author(s)
Today's post was co-authored by Glaucia Lemos - a JavaScript + Cloud Advocate on the Developer Relations team at Microsoft. Glaucia maintains an active YouTube channel with developer tutorials on a wide variety of topics from JavaScript, TypeScript and Node.js, to developing with various Front-end Frameworks for the modern web. Find her on linktr.ee or follow her here on dev.to:
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
- a GitHub account - you can signup for a free one if needed.
- an Azure account - you can signup for a free account to start.
- Visual Studio Code and this VS Code Extension - if you favor IDEs.
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!
- Quickstart: With Azure CLI - for commandline-driven workflow.
- Quickstart: With Azure Portal - for browser-driven workflow.
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.
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:
- Hosted SWA: See the live-deployment here
- Codebase: See the code source repo here
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.
- Select the Static Web Apps section and click "+" to start SWA setup
- Select the relevant Azure subscription to use
- Select the region to deploy to (close to you)
- Select the "Custom" preset - use
/srcas app location, leave build empty - 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:
-
Browse Site- click to see the live-deployed site -
Edit Workflow- click to see automated GitHub Actions setup for the SWA. -
Open in Portal- click to manage the SWA in the Azure Portal.
1.4 Let's Unpack
So what happened?
If you look at your codebase you will find one key change - the Azure SWA service sets up the GitHub Actions workflow for you, directly in the repo, with no manual intervention needed from you!
The workflow automates the build/deploy process on both code commit (push) and contribution (pull request) events. Now, when you make changes to your application code, the commit process will automatically rebuild and deploy your Static Web App automatically for you.
1.5 Video Tutorial
Prefer to see this in video form? Check out this 2-minute Azure Static Web Apps: Tips & Tricks video that shows a different vanilla-JS application being configured and deployed - using the Visual Studio Code option - to Static Web Apps!
2. Let's Go Further!
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.
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.
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!.
