Configure front-end frameworks and libraries with Azure Static Web Apps
Azure Static Web Apps requires that you have the appropriate configuration values in the build configuration file for your front-end framework or library.
Configuration
The following table lists the settings for a series of frameworks and libraries1.
The intent of the table columns is explained by the following items:
- Output location (App artifact location): Lists the value for
output_location, which is the folder for built static website files. - API artifact location (api location): Lists the value for
api_location, which is the folder containing the built managed Azure Functions for frameworks that require server-side hosting. - Custom build command: When the framework requires a command different from
npm run buildornpm run azure:build, you can define a custom build command.
Note
Some web frameworks that feature server-side rendering and can be deployed to Azure Static Web Apps. This means your app is built into static assets along with Azure Functions. In the configuration file, the static assets are mapped to the output location and the Azure Functions files map to the API artifact location.
| Framework | Output location (App artifact location) | API artifact location | Custom build command |
|---|---|---|---|
| Alpine.js | / |
n/a | n/a 2 |
| Angular | dist/<APP_NAME>/browser |
n/a | n/a |
| Astro | dist |
n/a | n/a |
| Aurelia | dist |
n/a | n/a |
| Backbone.js | / |
n/a | n/a |
| Blazor (WASM) | wwwroot |
n/a |
n/a |
| Ember | dist |
n/a | n/a |
| Flutter | build/web |
n/a | flutter build web |
| Framework7 | www |
n/a | npm run build-prod |
| Glimmer | dist |
n/a | n/a |
| HTML | / |
n/a | n/a |
| Hugo | public |
n/a | n/a |
| Hyperapp | / |
n/a | n/a |
| JavaScript | / |
n/a | n/a |
| jQuery | / |
n/a | n/a |
| KnockoutJS | dist |
n/a | n/a |
| LitElement | / |
n/a | n/a |
| Mithril | / |
n/a | n/a |
| Next.js (Static HTML Export) | out |
n/a | n/a |
| Next.js (Hybrid Rendering) | / |
n/a | n/a |
| Nuxt 2 | / |
n/a | n/a |
| Nuxt 3 | output/public |
output/server |
n/a |
| Preact | dist |
n/a | n/a |
| React | build |
n/a | n/a |
| RedwoodJS | web/dist |
n/a | yarn rw build web |
| Solid | dist |
n/a | n/a |
| Stencil | www |
n/a | n/a |
| SvelteKit (static) | build |
n/a | n/a |
| SvelteKit | build/static |
build/server |
n/a |
| Three.js | / |
n/a | n/a |
| TypeScript | dist |
n/a | n/a |
| Vue.js | dist |
n/a | n/a |
1 The above table is not meant to be an exhaustive list of frameworks and libraries that work with Azure Static Web Apps.
2 Not applicable