Konfigurieren von Front-End-Frameworks und Bibliotheken mit Azure Static Web Apps
Azure Static Web-Apps erfordert, dass Sie in der Buildkonfigurationsdatei für Ihr Front-End-Framework oder Ihre Bibliothek über die entsprechenden Konfigurationswerte verfügen.
Konfiguration
Die folgende Tabelle listet die Einstellungen für eine Reihe von Frameworks und Bibliotheken auf1.
Die Absicht der Tabellenspalten wird durch die folgenden Punkte erläutert:
- Ausgabespeicherort (App-Artefaktspeicherort): Listet den Wert für
output_locationden Ordner für erstellte statische Websitedateien auf. - API-Artefaktspeicherort (API-Speicherort): Listet den Wert für
api_locationden Ordner auf, der die integrierten verwalteten Azure-Funktionen für Frameworks enthält, für die serverseitiges Hosting erforderlich ist. - Benutzerdefinierter Buildbefehl: Wenn das Framework einen anderen Befehl als
npm run buildodernpm run azure:builderfordert, können Sie einen benutzerdefinierten Buildbefehl definieren.
Hinweis
Einige Webframeworks, die serverseitiges Rendering bereitstellen und in Azure Static Web-Apps bereitgestellt werden können. Dies bedeutet, dass Ihre App in statische Ressourcen und Azure Functions-Dateien integriert ist. In der Konfigurationsdatei werden die statischen Ressourcen dem Ausgabespeicherort zugeordnet, und die Azure Functions-Dateien werden dem API-Artefaktspeicherort zugeordnet.
| Framework | Ausgabespeicherort (App-Artefaktspeicherort) | API-Artefaktspeicherort | Benutzerdefinierter Buildbefehl |
|---|---|---|---|
| Alpine.js | / |
– | Nicht zutreffend 2 |
| Angular | dist/<APP_NAME>/browser |
– | – |
| Astro | dist |
– | – |
| Aurelia | dist |
– | – |
| Backbone.js | / |
– | – |
| Blazor (WASM) | wwwroot |
n/a |
– |
| Ember | dist |
– | – |
| Flutter | build/web |
– | flutter build web |
| Framework7 | www |
– | npm run build-prod |
| Glimmer | dist |
– | – |
| HTML | / |
– | – |
| Hugo | public |
– | – |
| Hyperapp | / |
– | – |
| JavaScript | / |
– | – |
| jQuery | / |
– | – |
| KnockoutJS | dist |
– | – |
| LitElement | / |
– | – |
| Mithril | / |
– | – |
| Next.js (statischer HTML-Export) | out |
– | – |
| Next.js (Hybrid Rendering) | / |
– | – |
| Nuxt 2 | / |
– | – |
| Nuxt 3 | output/public |
output/server |
– |
| Preact | dist |
– | – |
| React | build |
– | – |
| RedwoodJS | web/dist |
– | yarn rw build web |
| Solide | dist |
– | – |
| Schablone | www |
– | – |
| SvelteKit (statisch) | build |
– | – |
| SvelteKit | build/static |
build/server |
– |
| Three.js | / |
– | – |
| TypeScript | dist |
– | – |
| Vue.js | dist |
– | – |
1 Die obige Tabelle ist nicht als umfassende Liste von Frameworks und Bibliotheken gedacht, die mit Azure Static Web Apps arbeiten.
2 Nicht zutreffend