Ejercicio: Configuración y exploración del proyecto de ejemplo

  • 5 minutos

En esta unidad, obtendrá el código de la aplicación existente de GitHub, preparará el código y establecerá el entorno de desarrollo.

Obtención y preparación del código

  1. En una terminal Bash, clona el repositorio de código.

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

  2. Cambie al directorio del repositorio de código.

    cd learn-functions

  3. Instale las dependencias del paquete npm.

    npm install

  4. Compile el código de Node.js Express y de Angular.

    npm run full:build

Descripción de la estructura de la aplicación

La aplicación de ejemplo es una API de Node.js y Express API convencional con cuatro métodos que sirven a los siguientes puntos de conexión:

Método Punto de conexión de ruta
GET vacations
POST vacations
PUT vacations:id
DELETE vacations/:id

Abra el proyecto en Visual Studio Code y abra la carpeta del servidor para explorar la estructura de la 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. El punto de entrada es el archivo server/index.ts, el cual ejecuta el código server.ts para iniciar el servidor de Express.
  2. A continuación, las rutas, como /vacations, se cargan desde la carpeta /routes.
  3. Estas rutas ejecutan el código adecuado en la carpeta /services. La configuración del almacén de datos se define en el archivo vacation.service.ts.

La aplicación cliente de Angular realiza una solicitud HTTP GET a la ruta /api/vacations, y la ruta en routes/vacation.routes.ts llama a la lógica de datos en el archivo services/vacation.service.ts para obtener las vacaciones.

Configuración de proxy

La aplicación Angular necesita poder realizar solicitudes a la API Express de Node.js. La aplicación Angular usa un proxy para redirigir las solicitudes al servidor Express. La configuración de un proxy permite que el explorador busque el servidor Express. Abra proxy.conf.json y observe que el puerto está establecido en 7070, el puerto de la aplicación Express.

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