Introdução

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

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

Pré-requisitos

Se você deseja acompanhar este artigo, você precisará:

• Um ambiente de desenvolvimento local para Node.js.

Este tutorial foi criado com 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 a janela do terminal e crie um novo diretório de projeto:

mkdir express-example

Então, navegue até o diretório recém-criado:

cd express-example

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

npm init -y

Em seguida, você precisará 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 o 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 Express do pacote que você instalou. Este módulo é uma função, que executamos na segunda linha para criar nossa variável de aplicativo. Você pode criar vários aplicativos dessa maneira, 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 é onde nós dizemos ao nosso servidor Express como lidar com uma solicitação GET para o nosso servidor. O Express inclui funções semelhantes para POST, PUT, etc. usando app.post(...), app.put(...), etc.

Essas funções têm dois principais parâmetros. O primeiro é a URL para que esta função atue. Neste caso, estamos visando '/', que é a raiz do nosso site: nesse 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 ao 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('Servidor iniciado na porta 3000.'));

Finalmente, depois de configurarmos nossas solicitações, devemos iniciar nosso servidor! Estamos passando 3000 na função listen, o que fala ao aplicativo em qual porta escutar. A função passada como segundo parâmetro é opcional e é executada quando o servidor é iniciado. Isso nos fornece algum feedback no console para saber que nosso aplicativo está em execução.

Volte na sua janela do terminal e execute seu aplicativo:

node server.js

Em seguida, visite localhost:3000 no seu navegador. A janela do seu navegador exibirá: "Resposta bem-sucedida". Sua janela do terminal exibirá: "Servidor iniciado na porta 3000.".

E aqui está, um servidor web! No entanto, certamente queremos enviar mais do que apenas uma linha de texto de volta para o cliente. Vamos cobrir brevemente o que é middleware e como configurar esse servidor como um servidor de arquivos estáticos!

Etapa 3 - Usando Middleware

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

• Executar qualquer código.
• Fazer alterações nos objetos de solicitação e resposta.
• Terminar 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 nossa própria middleware e, em seguida, tentaremos usar algumas middleware existentes para servir arquivos estáticos.

Para definir uma função de middleware, chamamos app.use() e passamos 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('Servidor iniciado na porta 3000.'));

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

Podemos opcionalmente 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('Servidor iniciado na porta 3000.'));

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

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

node server.js

Agora, vá até localhost:3000/request-type no seu navegador. Sua janela do terminal exibirá a data e hora 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 embutida: express.static. Também usaremos uma função de middleware de terceiros, serve-index, para exibir uma listagem de índice de nossos arquivos.

Primeiro, dentro da mesma pasta onde o servidor express está localizado, crie uma pasta chamada 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 ao 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('Servidor iniciado na porta 3000.'));

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

Conclusão

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