Exercice - Configurer et explorer l’exemple de projet

  • 5 minutes

Dans cette unité, vous obtenez le code de l’application existante à partir de GitHub, vous préparez le code, puis vous configurez votre environnement de développement.

Obtenir et préparer le code

  1. Dans un terminal bash, clonez le dépôt de code.

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

  2. Accédez au répertoire du dépôt de code.

    cd learn-functions

  3. Installez les dépendances du package npm.

    npm install

  4. Générez le code Node.js Express et Angular.

    npm run full:build

Comprendre la structure d’application

L’exemple d’application est une API Node.js et Express conventionnelle avec quatre méthodes qui traitent les points de terminaison suivants :

Méthode Point de terminaison de route
GET vacations
POST vacations
PUT vacations:id
DELETE vacations/:id

Ouvrez le projet dans Visual Studio Code, puis ouvrez le dossier server pour explorer la structure de l’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. Le point d’entrée est le fichier server/index.ts, qui exécute le code de server.ts pour démarrer le serveur Express.
  2. Les routes, comme /vacations sont ensuite chargées à partir du dossier /routes.
  3. Ces routes exécutent le code approprié dans le dossier /services. La configuration du magasin de données est définie dans le fichier vacation.service.ts.

L’application cliente Angular envoie une requête HTTP GET à l’itinéraire /api/vacations, et l’itinéraire dans routes/vacation.routes.ts appelle de la logique de données dans le fichier services/vacation.service.ts pour obtenir les congés.

Configuration du proxy

L’application Angular doit pouvoir effectuer des requêtes à l’API Express Node.js. L’application Angular utilise un proxy pour transférer des requêtes au serveur Express. La configuration d’un proxy permet au navigateur de localiser le serveur Express. Ouvrez proxy.conf.json et notez que le port est défini sur 7070, qui est le port de l’application Express.

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