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 build or npm 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

Next steps