Latihan - Menyiapkan dan menjelajahi proyek sampel

  • 5 menit

Di unit ini, Anda mendapatkan kode aplikasi yang ada dari GitHub, menyiapkan kode, dan menyiapkan lingkungan pengembangan Anda.

Mendapatkan dan menyiapkan kode

  1. Di terminal bash, kloning repositori kode.

    git clone https://github.com/MicrosoftDocs/mslearn-module-shifting-nodejs-express-apis-to-serverless learn-functions

  2. Ubah ke direktori repositori kode.

    cd learn-functions

  3. Instal dependensi paket npm.

    npm install

  4. Buat kode Node.js Express dan Angular.

    npm run full:build

Memahami struktur aplikasi

Aplikasi sampel adalah Node.js konvensional dan Express API dengan empat metode yang melayani titik akhir berikut:

Metode Titik akhir rute
GET vacations
POST vacations
PUT vacations:id
DELETE vacations/:id

Buka proyek di Visual Studio Code, dan buka folder server untuk menjelajahi struktur API.

server
 | - data
 | | - vacations.json
 | - models
 | | - vacation.model.ts
 | - routes
 | | - index.ts            👈 1. Entry point
 | | - vacation.routes.ts  👈 2. The vacation routes
 | - services
 | | - index.ts
 | | - vacation.service.ts 👈 3. The logic and data 
 | - index.ts
 | - server.ts             👈 The Express server
 | - tsconfig.json
  1. Titik entri adalah file server/ index.ts, yang menjalankan kode server.ts untuk memulai server Ekspres.
  2. Kemudian rute, seperti /vacations, dimuat dari folder /routes .
  3. Rute menjalankan kode yang sesuai di folder /services . Konfigurasi penyimpanan data ditentukan dalam file vacation.service.ts .

Aplikasi klien Angular membuat HTTP GET permintaan ke /api/vacations rute, dan rute dalam routes/vacation.routes.ts memanggil logika data dalam services/vacation.service.ts file untuk mendapatkan liburan.

Konfigurasi proksi

Aplikasi Angular harus dapat membuat permintaan ke Node.js Express API. Aplikasi Angular menggunakan proksi untuk meneruskan permintaan ke server Ekspres. Menyiapkan proksi memungkinkan browser menemukan server Ekspres. Buka proxy.conf.json dan perhatikan bahwa port diatur ke 7070, port aplikasi Express.

{
  "/api": {
    "target": "http://localhost:7070",
    "secure": false
  }
}