Exercício - Configurar e explorar o projeto de exemplo

  • 5 minutos

Nesta unidade, você obtém o código do aplicativo existente do GitHub, prepara o código e configura seu ambiente de desenvolvimento.

Obter e preparar o código

  1. Em um terminal bash, clone o repositório de código.

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

  2. Mude para o diretório do repositório de código.

    cd learn-functions

  3. Instale as dependências do pacote npm.

    npm install

  4. Crie o código Node.js Express e Angular.

    npm run full:build

Compreender a estrutura do aplicativo

O aplicativo de exemplo é uma API convencional Node.js e Express com quatro métodos que servem os seguintes pontos de extremidade:

Método Ponto de extremidade da rota
GET vacations
POST vacations
PUT vacations:id
DELETE vacations/:id

Abra o projeto no Visual Studio Code e abra a pasta do servidor para explorar a estrutura da 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. O ponto de entrada é o ficheiro server/index.ts, que executa o código server.ts para iniciar o servidor Express.
  2. Em seguida, as rotas, como /vacations, são carregadas da pasta /routes .
  3. As rotas executam o código apropriado na pasta /services . A configuração do armazenamento de dados é definida no arquivo vacation.service.ts .

O aplicativo cliente Angular faz uma HTTP GET solicitação para a /api/vacations rota, e a rota em routes/vacation.routes.ts chama a lógica de dados no services/vacation.service.ts arquivo para obter as férias.

Configuração do proxy

O aplicativo Angular precisa ser capaz de fazer solicitações para a API do Node.js Express. O aplicativo Angular usa um proxy para encaminhar solicitações para o servidor Express. A configuração de um proxy permite que o navegador localize o servidor Express. Abra proxy.conf.json e observe que a porta está definida como 7070, a porta do aplicativo Express.

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