Front-end frameworks en bibliotheken configureren met Azure Static Web Apps
Voor Azure Static Web Apps moet u de juiste configuratiewaarden in het buildconfiguratiebestand hebben voor uw front-endframework of -bibliotheek.
Configuratie
De volgende tabel bevat de instellingen voor een reeks frameworks en bibliotheken1.
De intentie van de tabelkolommen wordt uitgelegd door de volgende items:
- Uitvoerlocatie (locatie van app-artefact): geeft een lijst van de waarde voor
output_location
de map voor ingebouwde statische websitebestanden. - API-artefactlocatie (API-locatie):geeft een lijst van de waarde voor
api_location
, de map met de ingebouwde beheerde Azure Functions voor frameworks waarvoor hosting aan de serverzijde is vereist. - Aangepaste build-opdracht: wanneer voor het framework een andere
npm run build
npm run azure:build
opdracht is vereist, kunt u een aangepaste build-opdracht definiëren.
Notitie
Sommige webframeworks met rendering aan de serverzijde en kunnen worden geïmplementeerd in Azure Static Web Apps. Dit betekent dat uw app is ingebouwd in statische assets en Azure Functions-bestanden. In het configuratiebestand worden de statische assets toegewezen aan de uitvoerlocatie en de Azure Functions-bestanden worden toegewezen aan de locatie van het API-artefact.
Framework | Uitvoerlocatie (locatie app-artefact) | Locatie van API-artefact | Aangepaste build-opdracht |
---|---|---|---|
Alpine.js | / |
N.v.t. | n/a 2 |
Angular | dist/<APP_NAME>/browser |
N.v.t. | N.v.t. |
Astro | dist |
N.v.t. | N.v.t. |
Aurelia | dist |
N.v.t. | N.v.t. |
Backbone.js | / |
N.v.t. | N.v.t. |
Blazor (WASM) | wwwroot |
n/a |
N.v.t. |
Ember | dist |
N.v.t. | N.v.t. |
Flutter | build/web |
N.v.t. | flutter build web |
Framework7 | www |
N.v.t. | npm run build-prod |
Glimmer | dist |
N.v.t. | N.v.t. |
HTML | / |
N.v.t. | N.v.t. |
Hugo | public |
N.v.t. | N.v.t. |
Hyperapp | / |
N.v.t. | N.v.t. |
JavaScript | / |
N.v.t. | N.v.t. |
Jquery | / |
N.v.t. | N.v.t. |
KnockoutJS | dist |
N.v.t. | N.v.t. |
LitElement | / |
N.v.t. | N.v.t. |
Mithril | / |
N.v.t. | N.v.t. |
Next.js (Statische HTML-export) | out |
N.v.t. | N.v.t. |
Next.js (Hybrid Rendering) | / |
N.v.t. | N.v.t. |
Nuxt 2 | / |
N.v.t. | N.v.t. |
Nuxt 3 | output/public |
output/server |
N.v.t. |
Preact | dist |
N.v.t. | N.v.t. |
React | build |
N.v.t. | N.v.t. |
RedwoodJS | web/dist |
N.v.t. | yarn rw build web |
Solid | dist |
N.v.t. | N.v.t. |
Stencil | www |
N.v.t. | N.v.t. |
SvelteKit (statisch) | build |
N.v.t. | N.v.t. |
SvelteKit | build/static |
build/server |
N.v.t. |
Three.js | / |
N.v.t. | N.v.t. |
TypeScript | dist |
N.v.t. | N.v.t. |
Vue.js | dist |
N.v.t. | N.v.t. |
1 De bovenstaande tabel is niet bedoeld als een volledige lijst met frameworks en bibliotheken die werken met Azure Static Web Apps.
2 Niet van toepassing