Latihan - Memulai

  • 3 menit

Azure Static Web Apps menerbitkan situs web ke lingkungan produksi dengan membangun aplikasi dari repositori GitHub. Dalam latihan ini, Anda akan membangun aplikasi web menggunakan kerangka kerja ujung depan pilihan Anda dari repositori GitHub.

Membuat repositori

Modul ini memudahkan Anda untuk membuat repositori baru dengan menggunakan repositori templat GitHub. Serangkaian templat tersedia dan masing-masing berisi aplikasi starter yang dibangun dengan kerangka kerja ujung depan yang berbeda.

  1. Navigasi ke halaman buat dari templat untuk repositori templat. Jika Anda mendapatkan kesalahan 404: Halaman Tidak Ditemukan , masuk ke GitHub dan coba lagi.

  2. Pilih salah satu akun GitHub Anda di menu drop-down Pemilik .

  3. Beri nama repositori Anda my-static-blazor-app.

  4. Pilih tombol Buat repositori dari templat .

Jalankan aplikasi Anda

Anda baru saja membuat repositori GitHub bernama my-static-blazor-app di akun GitHub Anda. Selanjutnya, Anda akan mengkloning repo dan menjalankan kode secara lokal di komputer.

  1. Buka terminal pada komputer Anda.

  2. Mulailah dengan mengkloning repositori GitHub ke direktori yang diinginkan di komputer Anda.

    git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app

  3. Buka folder tersebut untuk kode sumber Anda.

    cd my-static-web-app

  4. Selanjutnya, buka folder kerangka kerja ujung depan pilihan Anda, seperti yang ditunjukkan di bawah.

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  5. Sekarang instal dependensi aplikasi.

    npm install

    Catatan

    Jika Anda mendapatkan kesalahan Tidak dapat menemukan PATH , pastikan Anda telah menginstal Node.js dari https://nodejs.org. Anda mungkin perlu melakukan Penyiapan kustom yang menyertakan penginstalan opsi Tambahkan ke JALUR .

    Screenshot displaying the custom install of Node.js options in wizard.

  6. Terakhir, jalankan aplikasi klien front-end.

    npm start

    npm start

    npm run dev

    npm run serve

Telusuri aplikasi Anda

Saatnya melihat aplikasi Anda berjalan secara lokal. Setiap aplikasi front-end berjalan pada port yang berbeda.

Klik tautan untuk menelusuri aplikasi Anda.

Telusuri http://localhost:4200.

Screenshot of browsing to your Angular web app.

Telusuri http://localhost:3000.

Screenshot of browsing to your React web app.

Telusuri http://localhost:5000.

Screenshot of browsing to your Svelte web app.

Telusuri http://localhost:8080.

Screenshot of browsing to your Vue web app.

Catatan

Dalam latihan modul ini, Anda akan menyebarkan aplikasi tanpa API. Lihat bagian Langkah berikutnya di akhir modul ini untuk informasi tentang modul berikutnya, tempat Anda akan menyebarkan API bersama aplikasi Anda.

Sekarang, hentikan aplikasi yang berjalan dengan menekan Ctrl-C di terminal.

Langkah berikutnya

Anda telah membuat aplikasi, dan sekarang aplikasi berjalan secara lokal di browser Anda.

Selanjutnya, Anda akan menerbitkan aplikasi ke Azure Static Web Apps.