Como Começar com Node.js e Express

Introdução

O Express é um framework de aplicação web para o Node.js que permite criar APIs robustas e servidores web de forma mais fácil e limpa. É um pacote leve que não obscurece as funcionalidades principais do Node.js.

Neste artigo, você irá instalar e usar o Express para construir um servidor web.

Pré-requisitos

Se você deseja seguir este artigo, precisará de:

• A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.

Este tutorial foi verificado com o Node v15.14.0, npm v7.10.0, express v4.17.1 e serve-index v1.9.1.

Passo 1 — Configurando o Projeto

Primeiro, abra sua janela de terminal e crie um novo diretório de projeto:

mkdir express-example

Em seguida, navegue até o diretório recém-criado:

cd express-example

Neste ponto, você pode inicializar um novo projeto npm:

npm init -y

Depois, será necessário instalar o pacote express:

npm install express@4.17.1

Neste ponto, você tem um novo projeto pronto para usar o Express.

Passo 2 — Criando um Servidor Express

Agora que o Express está instalado, crie um novo arquivo server.js e abra-o com seu editor de código. Em seguida, adicione as seguintes linhas de código:

const express = require('express');

const app = express();

A primeira linha aqui está pegando o módulo principal do Express do pacote que você instalou. Este módulo é uma função, que então executamos na segunda linha para criar nossa variável app. Você pode criar vários aplicativos desta forma, cada um com suas próprias solicitações e respostas.

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Successful response.');
});

Essas linhas de código são onde dizemos ao nosso servidor Express como lidar com uma solicitação GET para nosso servidor. O Express inclui funções semelhantes para POST, PUT, etc., usando app.post(...), app.put(...), etc.

Essas funções recebem dois parâmetros principais. O primeiro é a URL para esta função agir. Neste caso, estamos mirando '/', que é a raiz do nosso site: neste caso, localhost:3000.

O segundo parâmetro é uma função com dois argumentos: req e res. req representa a solicitação que foi enviada para o servidor; Podemos usar este objeto para ler dados sobre o que o cliente está solicitando fazer. res representa a resposta que enviaremos de volta para o cliente.

Aqui, estamos chamando uma função em res para enviar de volta uma resposta: 'Resposta bem-sucedida.'.

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

Finalmente, uma vez configuradas as nossas solicitações, devemos iniciar nosso servidor! Estamos passando 3000 para a função listen, que informa à aplicação em qual porta escutar. A função passada como segundo parâmetro é opcional e é executada quando o servidor é iniciado. Isso nos fornece um feedback no console para saber que nossa aplicação está em execução.

Revisite sua janela do terminal e execute sua aplicação:

node server.js

Depois, visite localhost:3000 em seu navegador da web. Sua janela do navegador exibirá: 'Resposta bem-sucedida'. Sua janela do terminal exibirá: 'O aplicativo de exemplo está ouvindo na porta 3000.'.

E é isso aí, um servidor web! No entanto, definitivamente queremos enviar mais do que apenas uma única linha de texto de volta para o cliente. Vamos cobrir brevemente o que é middleware e como configurar este servidor como um servidor de arquivos estáticos!

Passo 3 — Usando Middleware

Com o Express, podemos escrever e usar funções de middleware, que têm acesso a todas as solicitações HTTP chegando ao servidor. Essas funções podem:

• Executar qualquer código.
• Fazer alterações nos objetos de solicitação e resposta.
• Encerrar o ciclo de solicitação-resposta.
• Chamar a próxima função de middleware na pilha.

Podemos escrever nossas próprias funções de middleware ou usar middleware de terceiros importando-os da mesma forma que faríamos com qualquer outro pacote.

Vamos começar escrevendo nosso próprio middleware e depois tentaremos usar alguns middlewares existentes para servir arquivos estáticos.

Para definir uma função de middleware, chamamos app.use() e passamos a ela uma função. Aqui está uma função de middleware básica para imprimir a hora atual no console durante cada solicitação:

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

A chamada next() indica ao middleware para passar para a próxima função de middleware, se houver uma. Isso é importante para incluir no final de nossa função – caso contrário, a solicitação ficará presa neste middleware.

Opcionalmente, podemos passar um caminho para o middleware, que só lidará com solicitações para essa rota. Por exemplo:

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

Ao passar '/request-type' como o primeiro argumento para app.use(), esta função será executada apenas para solicitações enviadas para localhost:3000/request-type.

Volte para a janela do terminal e execute sua aplicação:

node server.js

Em seguida, visite localhost:3000/request-type em seu navegador da web. Sua janela do terminal exibirá o horário da solicitação e 'Tipo de solicitação: GET'.

Agora, vamos tentar usar middlewares existentes para servir arquivos estáticos. O Express vem com uma função de middleware integrada: express.static. Também usaremos uma função de middleware de terceiros, serve-index, para exibir uma lista de índice de nossos arquivos.

Primeiro, dentro da mesma pasta onde o servidor express está localizado, crie um diretório chamado public e coloque alguns arquivos lá.

Em seguida, instale o pacote serve-index:

npm install serve-index@1.9.1

Primeiro, importe o pacote serve-index no topo do arquivo do servidor.

Em seguida, inclua os middlewares express.static e serveIndex e informe o caminho de acesso e o nome do diretório:

const express = require('express');
const serveIndex = require('serve-index');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

app.use('/public', express.static('public'));
app.use('/public', serveIndex('public'));

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

Agora, reinicie seu servidor e navegue até localhost:3000/public. Você será apresentado a uma lista de todos os seus arquivos!

Conclusão

Neste artigo, você instalou e usou o Express para construir um servidor web. Você também utilizou funções de middleware integradas e de terceiros.

Continue aprendendo com Como Usar o Objeto req no Express, Como Usar o Objeto res no Express e Como Definir Rotas e Métodos de Requisição HTTP no Express.