Azure Static Web Apps: build app externally

Azure Static Web Apps can generally build themselves with Oryx. If you need finer grained control of your build, you can with skip_app_build: true and some GitHub Actions.

Build with Oryx

I love Azure Static Web Apps. My blog is built with them. I've written about them many times.

One of the things I like about Azure Static Web Apps is that they can build themselves. You can just push your code to GitHub and they'll build it using a tool called Oryx. This is great for simple scenarios. Actually, it's good for medium to complex scenarios too. However, if you ever get to that "break glass" moment where you need to do something unusual with your build, you can.

Let's start by looking at a simple Azure Static Web Apps configuration:

Above is an old version of what my blog used to build and deploy itself. With the yaml above, Oryx built the app and deployed it. I wanted to add the last modified date to my blog posts. It would have been fiddly to do this in Oryx.

Build externally

So, I decided to build the app externally and then deploy it. I did this by tweaking the yaml above to add some extra steps:

What's changed? Well, I've added a few steps:

• Setup Node.js - essentially, this is just installing Node.js so we can build the app
• Install and build site - this is where we actually do install the dependencies and build the app
• Significantly (and thanks to Vivek Jilla for this tip), we copy the staticwebapp.config.json file to the build folder. This is important because it contains the routing information for the app. Without it, any rules you have in your staticwebapp.config.json file won't be applied.
• We set skip_app_build: true - this tells Azure Static Web Apps to skip the build step and point it at the build folder instead, where the built app (with staticwebapp.config.json) can be found.

With this in place I'm now able to build the app externally and deploy it to Azure Static Web Apps. This is great for when you need to do something a little more complex than Oryx can handle.