How to fix Azure Static Web App build after adding CRACO

Photo by Zach Vessels on Unsplash

I love Azure Static Web App, ever since the Preview days. Get a static web app built, deployed and hosted in a matter of minutes, using the default settings.

However, I started using TailwindCSS, a CSS framework that changed my life when it came to front-end development. I would definitely recommend taking a look at it, if you haven’t yet. It speeds up styling immensely. Though, jumping into Tailwind is outside the scope of this article. I mention Tailwind, because as part of their installation process, you have to install CRACO, create a craco.config.js file and update your npm scripts to use CRACO to build your app.

This is where an issue popped up for me, because after running through the Tailwind installation process, suddenly my builds in de Github Workflow started to fail with the message:

Oryx built the app folder but was unable to determine the location of the app artifacts. Please specify the app artifact location.

You can imagine this made no sense, because surely adding Tailwind shouldn’t mess with the build. Turns out, CRACO does. The following change fixed the build for me.