This post is adapted from a longer article first published on my Learn Playwright blog. Any updates to content will be published on that site first.
🔖 | Today's Resources
- Azure Static Web Apps - browse the documentation!
- Azure Static Web Apps: Learning Path - learn by doing!
- Playwright - an open-source test automation framework.
- Publish a Hugo Site to ASWA - an easy-to-follow tutorial
- Hugo Cookbook Theme - a handy recipe blog theme
- Recipes4AJ: GitHub Repo - README documents my entire build process!
- Recipes4AJ: Deployed Site - Because we all need recipes in our lives!
🗺 | Post Outline
- ✅ | Objective: Quickly Build & Deploy a Demo App!
- ✅ | About Azure Static Web Apps
- ✅ | Recipes4AJ: Yes, I Cooked Up An App!
- ✅ | Tutorial: Azure Static Web Apps + Hugo
- ✅ | Automation with GitHub Actions!
- ✅ | Additional Resources
🎯 | Objective: Quickly Build & Deploy a Demo App!
If you've been following my posts recently, you might know I'm playing around (pun intended) with test automation tools and workflows using Playwright. Learn more here:
My next step was to explore Playwright Test tools in Playwright, and dive deeper into command-line, authoring and debugging support in more detail.
But it occurred to me that doing this with a somewhat realistic app as an experiment sandbox, might make more sense.
About Azure Static Web Apps
Enter Azure Static Web Apps - an Azure service that helps you build and deploy a full stack web app to Azure from a code repository. Code changes trigger build/deploy actions, making the developer experience painless.
Plus, there's a free tier for personal and hobby projects that is ideal for projects like this.
The key benefit to static web apps is their ability to separate static assets (HTML/CSS/JS files, images etc.) from the web server - making it easier to distribute and host static assets globally for better performance. Web server interactions can be abstracted into API endpoints hosted using a serverless architecture - leading to more efficiencies in performance and costs.
Azure Static Web Apps has tutorials for many popular static site generators and front-end frameworks to get you up-and-running fairly quickly. And don't forget to check community posts with additional tips and tricks.
Have questions or comments, do leave them here on this post and you might just inspire me to do something more!
Alright then - it's settled. I want to build a fun real-world app using Azure Static Web Apps with a supported static site generator or a front-end framework. And I can then use it to explore the Playwright tools and API!
So what's a fun use case you ask?
Recipes4AJ: Yes, I Cooked Up An App!
This was really the fun part! Like millions of people around the world, I'd been cooking up a storm over the past couple of years (thanks pandemic!). And I'd posted quite a few tweet-sized recipes under #RecipesForAJ or #Recipes4AJ).
What if I build a static web site that featured these recipes - and had simple tags and search functionality to help folks browse or discover recipe cards easily? Would that work? And how long would it take me to build it?
Two things sealed the deal:
- I'm a huge fan of Hugo - it's fast and flexible, with a rich set of themes for a rapid start. And voila- there was a Cookbook Theme that met my needs!
- Azure Static Web Apps has a quickstart for using Hugo. And yes, it took next to no time to complete the tutorial and have my basic (empty) blog scaffolded and deployed - do go check out the site!
Here's my celebratory post that morning!
Tutorial: Azure Static Web Apps + Hugo
This post is meant to focus on getting to the point where we have Playwright setup for end-to-end testing so I want to speed up to that point. If you want to try this out, follow the steps in the Azure Static Web Apps Hugo Quickstart - you can also watch an older video from my colleague that walks through the basic steps interactively!
For convenience, I documented my experience in the project README - it might be useful if you want to learn how to use this specific theme, or check out issues encountered and how to troubleshoot them. The key steps are:
- Install Hugo
- Scaffold your blog
- Initialize Git
- Add a Hugo Theme
- Customize and Configure Theme
- Create the first post
- Push Commits to GitHub
- Deploy to Azure Static Web Apps
Note that all but the last step are related to the use of the Hugo static site generator. The actual Azure Static Web Apps deployment happens in the final step - you should see something like this when done.
Automation with GitHub Actions!
A key benefit of using Azure Static Web Apps is that it sets up GitHub Actions to automate the build-deploy steps for you, on every commit.
Here is what the default YAML configuration file looked like for my project. You can see it is set up for two main trigger events -- push events (commits) and pull requests. And has two associated jobs (build and deploy and close pull request) that will be run based on a matching condition for these events.
name: Azure Static Web Apps CI/CD
on:
push:
branches:
- main
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- main
jobs:
build_and_deploy_job:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout@v2
with:
submodules: true
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GREEN_STONE_0EF96EF10 }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/" # App source code path
api_location: "" # Api source code path - optional
output_location: "public" # Built app content directory - optional
###### End of Repository/Build Configurations ######
close_pull_request_job:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request Job
steps:
- name: Close Pull Request
id: closepullrequest
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GREEN_STONE_0EF96EF10 }}
action: "close"
Now, any changes you make - e.g., adding a new post, or changing the content in an existing post - automatically triggers a rebuild and deploy of the blog. You can track status of past and ongoing runs in the Actions tab of your GitHub project. Check out the Test GitHub Actions step of my README to see how you can see this in action by adding a new blog post.
At the end of this step, my blog was deployed and the first post was visible as shown above. Now, it was time to think about integrating Playwright -- check back for an updated link to the blog post where I talk about how I do just that!
Additional Resources
Want to learn more about Azure Static Web Apps? Check out the current community posts on dev.to that explore this topic in more detail.
Then check out this post about a handy tool - the Azure Static Web Apps CLI developed by my colleague Wassim Chegham
And this more recent post about a couple of great resources built my another colleague Aaron Powell to really jumpstart your ASWA-development process. Hint: Think templates and command-line!
And definitely follow the Azure publication for more awesome content from my collegues on all things Cloud, AI and Multi-platform app development!
Now - go cook up something of your own!!
🔖 | Today's Resources
- Azure Static Web Apps - browse the documentation!
- Playwright - an open-source test automation framework.
- Azure Static Web Apps: Learning Path - learn by doing!
- Publish a Hugo Site to ASWA - an easy-to-follow tutorial
- Hugo Cookbook Theme - a handy recipe blog theme
- Recipes4AJ: GitHub Repo - README documents my entire build process!
- Recipes4AJ: Deployed Site - Because we all need recipes in our lives!
Top comments (0)