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 o 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. Altere para o diretório do repositório de código.

    cd learn-functions

  3. Instale as dependências do pacote npm.

    npm install

  4. Compile o código do Node.js Express e do Angular.

    npm run full:build

Entender a estrutura do aplicativo

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

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

Abra o projeto no Visual Studio Code e abra a pasta server 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 arquivo server/index.ts, que executa o código server.ts para iniciar o servidor do 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 solicitação HTTP GET para a rota /api/vacations e a rota em routes/vacation.routes.ts chama a lógica de dados no arquivo services/vacation.service.ts para obter as férias.

Configuração de proxy

O aplicativo Angular precisa ser capaz de fazer solicitações para a API Express Node.js. 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
  }
}