Mengonfigurasi kerangka kerja dan pustaka front-end dengan Azure Static Web Apps
Azure Static Web Apps mengharuskan Anda memiliki nilai konfigurasi yang sesuai dalam file konfigurasi build untuk kerangka kerja atau pustaka front-end Anda.
Konfigurasi
Tabel berikut mencantumkan pengaturan untuk serangkaian kerangka kerja dan pustaka1.
Maksud dari kolom tabel dijelaskan oleh item berikut:
- Lokasi output (Lokasi artefak aplikasi): Mencantumkan nilai untuk
output_location, yang merupakan folder untuk file situs web statis bawaan. - Lokasi artefak API (lokasi api): Mencantumkan nilai untuk
api_location, yang merupakan folder yang berisi Azure Functions terkelola bawaan untuk kerangka kerja yang memerlukan hosting sisi server. - Perintah build kustom: Saat kerangka kerja mengharuskan perintah yang berbeda dari
npm run buildataunpm run azure:build, Anda dapat menentukan perintah build kustom.
Catatan
Beberapa kerangka kerja web yang menampilkan penyajian sisi server dan dapat disebarkan ke Azure Static Web Apps. Ini berarti aplikasi Anda dibangun ke dalam aset statis dan file Azure Functions. Dalam file konfigurasi, aset statis dipetakan ke lokasi output dan peta file Azure Functions ke lokasi artefak API.
| Kerangka | Lokasi output (Lokasi artefak aplikasi) | Lokasi artefak API | Perintah build kustom |
|---|---|---|---|
| Alpine.js | / |
n/a | n/a 2 |
| Sudut | 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 (Ekspor HTML Statis) | out |
n/a | n/a |
| Next.js (Penyajian Hibrid) | / |
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 (statis) | 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 Tabel di atas tidak dimaksudkan sebagai daftar lengkap kerangka kerja dan pustaka yang berfungsi dengan Azure Static Web Apps.
2 Tidak berlaku