O que é Express.js e por que você deve usá-lo?

Express.js (ou "Express") é uma estrutura da web NodeJS usada no back-end (ou servidor) de sites e aplicativos da web. O Express é flexível e minimalista, o que significa que não possui uma coleção extensa de bibliotecas e pacotes desnecessários, nem dita como você deve construir seu aplicativo.

A estrutura Express constrói APIs que facilitam a comunicação por meio de solicitações e respostas HTTP. Uma das coisas notáveis ​​sobre o Express é que ele dá aos desenvolvedores controle completo sobre as solicitações e respostas que estão associadas a cada um dos métodos de seu aplicativo.

Neste tutorial, você aprenderá como e por que deve usar o Express em seus próprios projetos.

Instalando o Express em seu projeto

Antes de usar a estrutura Express, você precisará instalá-la no diretório do projeto. Este é um processo simples que requer NodeJS e npm.

A primeira coisa que você precisa fazer é criar um package.json (dentro do diretório / pasta do seu projeto) usando o seguinte comando:

npm init

Executar o comando acima iniciará um processo que solicitará as seguintes entradas:

• Nome do pacote
• Versão
• Descrição
• Ponto de entrada
• Comando de teste
• Palavras-chave
• Autor
• Licença

O nome do pacote, a versão, o ponto de entrada e os campos de licença têm valores padrão que podem ser facilmente substituídos fornecendo seus valores. No entanto, se você deseja manter os valores padrão, pode simplesmente usar o seguinte comando:

npm init -y

Executar o comando acima irá gerar o seguinte package.json arquivo no diretório do seu projeto:

{
"nome": "meuaplicativo",
"versão": "1.0.0",
"Descrição": "",
"main": "index.js",
"scripts": {
"test": "echo \" Erro: nenhum teste especificado \ "&& exit 1"
},
"palavras-chave": [],
"autor": "",
"licença": "ISC",
}

Agora você pode instalar o Express usando o seguinte comando:

npm install express --save

A instalação do Express irá gerar um package-lock.json arquivo, bem como um node_modules pasta.

Compreendendo o arquivo package.json

O motivo pelo qual você precisa criar um package.json antes de instalar o Express é que o package.json arquivo atua como um repositório, armazenando metadados importantes sobre o seu Projetos NodeJS.Dependências é o nome de um desses campos de metadados, e Express é um dependência.

A instalação do Express no diretório do seu projeto atualizará automaticamente o seu package.json Arquivo.

O arquivo package.json atualizado

{
"nome": "meuaplicativo",
"versão": "1.0.0",
"Descrição": "",
"main": "index.js",
"scripts": {
"test": "echo \" Erro: nenhum teste especificado \ "&& exit 1"
},
"palavras-chave": [],
"autor": "",
"licença": "ISC",
"dependências": {
"expresso": "^ 4.17.1"
}
}

Agora você tem um campo de “dependências” que possui uma dependência - Express. E a dependências object armazena software do qual seu projeto depende para funcionar corretamente, que neste caso é a estrutura Express.

Criando um servidor com o Express

Ter uma API que lida com o armazenamento e a movimentação de dados é um requisito para qualquer aplicativo full-stack, e o Express torna o processo de criação do servidor rápido e fácil.

Olhe para trás no package.json arquivo acima e você verá um campo “principal”. Este campo armazena o ponto de entrada para seu aplicativo, que é “index.js” no exemplo acima. Quando quiser executar seu aplicativo (ou, neste caso, o servidor que está prestes a construir), você terá que executar o index.js arquivo usando o seguinte comando:

node index.js

No entanto, antes de chegar ao estágio de execução, você precisará criar o index.js (ou aplicativo de servidor) no diretório do projeto.

Criação do arquivo index.js

const express = require ('express');
const app = express ();
porta const = 5000;
app.get ('/', (req, res) => {
res.send ('Seu servidor está operacional')
})
app.listen (porta, () => {
console.log (`Server is running at: http://localhost:${port}`);
})

O arquivo acima importa o Express e o usa para criar um aplicativo Express. O aplicativo Express então fornece acesso ao pegue e ouço métodos que fazem parte do módulo Express. O app.listen () método é o primeiro que você precisa configurar. Seu objetivo é listar as conexões em uma porta específica do computador host, que é porta 5000 no exemplo acima.

O propósito do app.get () método é obter dados de um recurso específico. Este método possui dois argumentos: um caminho e uma função de retorno de chamada. O argumento de caminho no exemplo acima possui uma barra que representa a posição raiz. Portanto, navegando para o http://localhost: 5000 URL (que é a raiz de seu aplicativo), enquanto seu aplicativo index.js acima está em execução, produzirá a seguinte saída em seu navegador:

O app.get () A função de retorno de chamada do método gera a saída acima. Essa função de retorno de chamada tem dois argumentos - solicitação e resposta. A resposta (que é res no exemplo acima) é o objeto HTTP que um aplicativo Express envia após uma solicitação HTTP (que é o que você faz digitando a URL acima em seu navegador).

Servindo um site estático com seu servidor expresso

Os servidores desempenham um papel significativo no desenvolvimento de APIs que ajudam a armazenar e transferir dados dinâmicos, e é aí que você provavelmente usará um servidor Express em seus próprios projetos.

No entanto, um servidor expresso também pode servir arquivos estáticos. Por exemplo, se você deseja criar um site estático (como um para um personal trainer, um treinador de vida ou um estilista), você pode usar seu servidor Express para hospedar o site.

Um exemplo de site HTML estático

 casa 







Bem vinda

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus rerum officia quibusdam mollitia deserunt animi soluta laudantium. Quam sapiente a dolorum magnam necessitatibus quis tempore facere totam. Dolor, sequi disttio!

Ver serviços

O código HTML acima cria uma página inicial estática agradável de um site de estilista pessoal com um link para o seguinte arquivo style.css:

*{
margem: 0;
preenchimento: 0;
dimensionamento da caixa: caixa de borda;
}
corpo {
família da fonte: 'Lato', sans-serif;
altura da linha: 1,5;
}
uma {
cor: # 333;
decoração de texto: nenhum;
}
ul {
estilo de lista: nenhum;
}
p {
margem: 0,5 rem 0;
}
h1 {
margem esquerda: 2rem;
}
/* Utilitário */
.container {
largura máxima: 1100px;
margem: automático;
preenchimento: 0 2rem;
estouro: oculto;
}
.btn {
display: bloco embutido;
fronteira: nenhum;
plano de fundo: # 910505;
cor: #fff;
preenchimento: 0.5rem 1rem;
raio da borda: 0,5 rem;
}
.btn: hover {
opacidade: 0,9;
}
/ * Navbar * /
#navbar {
plano de fundo: #fff;
posição: pegajosa;
topo: 0;
índice z: 2;
}
#navbar .container {
display: grade;
colunas-modelo de grade: 6fr 3fr 2fr;
preenchimento: 1rem;
alinhar-itens: centro;
}
#navbar h1 {
cor: # b30707;
}
#navbar ul {
justificar-se: fim;
display: flex;
margem direita: 3,5 rem;
}
#navbar ul li a {
preenchimento: 0,5 rem;
intensidade da fonte: Negrito;
}
#navbar ul li a.current {
plano de fundo: # b30707;
cor: #fff;
}
#navbar ul li a: hover {
plano de fundo: # f3f3f3;
cor: # 333;
}
#navbar .social {
justificar-se: centro;
}
#navbar .social i {
cor: # 777;
margem direita: 0,5 rem;
}
/* casa */
#casa {
cor: #fff;
fundo: # 333;
preenchimento: 2rem;
posição: relativa;
}
#home: before {
contente: '';
background: url ( https://source.unsplash.com/random) centro / tampa central sem repetição;
posição: absoluta;
topo: 0;
esquerda: 0;
largura: 100%;
altura: 100%;
opacidade: 0,4;
}
#home .showcase-container {
display: grade;
colunas de modelo de grade: repetir (2, 1fr);
justificar-conteúdo: centro;
alinhar-itens: centro;
altura: 100vh;
}
#home .showcase-content {
índice z: 1;
}
#home .showcase-content p {
margem inferior: 1rem;
}

Servindo o site com o servidor expresso

const express = require ('express');
const app = express ();
porta const = 5000;
app.use (express.static ('public'));
app.get ('/', (req, res) => {
res.sendFile ('index.html')
})
app.listen (porta, () => {
console.log (`Server is running at: http://localhost:${port}`);
})

Os arquivos HTML e CSS acima estão em uma pasta pública no diretório principal do projeto. A localização do arquivo HTML torna-o acessível ao servidor Express e suas funções.

Uma das novas funções do servidor Express acima é o app.use () método. Ele monta o express.static () middleware, que serve arquivos estáticos. Isso torna possível usar o res.sendFile () função para servir o estático index.html arquivo acima.

Navegando para o http://localhost: 5000 localização em seu navegador exibirá algo semelhante à seguinte saída:

Explorar o desenvolvimento de back-end

A estrutura Express permite que você faça solicitações HTTP específicas e receba respostas apropriadas usando um conjunto de métodos predefinidos. É também uma das estruturas de back-end mais populares da atualidade.

Aprender como usar a estrutura Express é uma grande jogada. Mas se você realmente deseja se tornar um desenvolvedor de back-end profissional, há muito mais que você precisa aprender.

Aprenda como se tornar um desenvolvedor de back-end em 2021

Se você está decidido a seguir uma carreira em TI, pode fazer pior do que aprender as habilidades de que precisa para ser um desenvolvedor de back-end.

Leia a seguir

Sobre o autor