Scaffolding Static Web Apps

Modified version of this comic

Over the past 18 months I’ve created a lot of Azure Static Web Apps, like… a lot. I’ve hit the quota of free apps several times and had to clean out demos to keep testing things!

But it’s always a little bit tedious, running create-react-app, setting up Functions, etc. so I went about creating a GitHub repo template for a basic React + TypeScript + Functions app. Then sometimes I’d be wanting a different framework, so I’d go off hunting for a new template, rinse and repeat.

Enter create-swa-app

To tackle this, I decided to create a command line tool to be used with npm init, @aaronpowell/swa-app, which will guide you through the creation using one of the templates that is listed on awesome-static-web-apps. It will also offer to create a GitHub repo for you using the template (this will prompt for a GitHub sign in workflow), so you’ll be ready to deploy it to Azure!

Think of this as a helpful starting point before jumping into the SWA CLI or VS Code extension.

Hopefully you’ll find this as a useful way to scaffold up a Static Web Apps project!

Comments

[Alex Weininger]

Hi Aaron, this is cool!

Any chance this becomes an official tool? Or maybe added into the SWA CLI?

[Aaron Powell]

Good question @alexweininger - In the future I might look to merge it in with the SWA CLI, we've got an open issue on it here - github.com/Azure/static-web-apps-c...

The thing I'd like to explore on building in official CLI support is the DX of this experience. Given that npm init is a common workflow for scaffolding, will is be as discoverable as doing swa init, given you'd need to have the CLI already installed? Or, is the anticipated user of it someone who's already familiar with SWA and has the CLI pre-installed?

Mostly, this is a tool for solving problems that I have, and I pushed it as OSS so that others can use it if required, and to help gather insights for the SWA CLI.