Azure Static Web App: I don’t want the app in the root of my project

3 min readFeb 8, 2024

TL;DR You need to change the YAML file as well as the folder.

If you’ve been following along with me on how to use Azure Static Web Apps we have already looked at:

The OOTB React example for Azure Static Web Apps is fine but its simple, a little too simple and one of the things it does is host the App directly in the root of the project and thus not separate the App from the API.

I think they’ve done this to keep things ‘simple’ so users can easily find the relevant parts, and the example does not use an API, but in practice when using a repository having code directly off the root means that it can only hold one component easily and any other components then have to be isolated via configuration.

In practice any but the most simple Web Sites will have a front end, the App, which is essentially static, and one or more back ends, the APIs, that provide active, i.e. state dependent data.

However often these front ends and back ends are tightly bound and unless you’re providing a generic utility API linked to a publicly available service it makes sense to keep them in a single repository, and maybe use something like tRPC to provide a type safe contract between them.

There’s some things you’ll need to do for this to happen.

Move all of the App files into a separate app folder
Modify the .github/workflows/*.yml file to reference this folder
Modify the swa-cli.config.json file to reference this folder

For a fully worked example see Simple-Innovation/my-first-static-web-app (github.com).

App Files and Folders

Move the following root level files into a folder, I use app as it fits nicely with api, which is used, by default, to host the API files.

build
public
src
.gitignore
package-lock.json
package.json
staticwebapp.config.json

YML File

In the .github/workflows folder you’ll find a yml file.

You need to update this so that the Azure Static Web App deployment tools know where to find the files.

In jobs > build_and_deploy_job > steps: -name Build And Deploy > with > app_location set the value to the name of the folder, e.g. app

swa-cli.config.json

You need to update this so that the Azure Static Web App local rnuntime tools know where to find the files.

In configurations > app name > appLocation set the value to the name of the folder, e.g. app

Tidy Up

If you have built the project before you must delete the root node_modules folder or it will get committed to the repository as a result of you moving the .gitignore file.

Build Locally

As we don’t have an API, yet, we can just build via the Azure Static Web Apps CLI.

swa build

Run Locally

As we don’t have an API, yet, we can just run via the Azure Static Web Apps CLI.

swa start

Deploy

I’d just commit your changes and push them to the Repository, Azure Static Web Apps will take care of the rest.