O Express, o framework Node.js mais utilizado no mundo, permite que os desenvolvedores criem servidores web de backend com JavaScript. Este framework fornece a maior parte do que os desenvolvedores de backend precisam “pronto para uso”, simplificando o roteamento e a resposta a solicitações web.
Já temos um guia sobre tudo o que você deve saber sobre o Express.js, portanto, este artigo prático mostrará como usá-lo. Este tutorial explica como você pode criar e implantar um aplicativo Node.js de exemplo usando o Express.js.
Como criar aplicativos rapidamente com Express.js
Este passo a passo demonstra como criar um aplicativo web que recebe solicitações em um endpoint, usa um parâmetro da solicitação para fazer uma chamada ao banco de dados e retorna informações do banco de dados como JSON.
Pré-requisitos
Para seguir este tutorial, verifique se você tem o seguinte instalado em seu computador:
- Node.js e Node Package Manager (npm) – Ambiente de tempo de execução essencial e gerenciador de pacotes para JavaScript.
- Git – Sistema de controle de versão distribuído que facilita o desenvolvimento colaborativo de software.
Gerador de aplicativos Express
Você pode adicionar o Express a aplicativos Node existentes usando o processo descrito em nosso guia do Express.js, mas se estiver começando do zero, há uma opção ainda mais rápida: o gerador do Express.
O gerador oficial Express do Express.js é um pacote Node que permite gerar um novo esqueleto de aplicativo. Isso pode ser feito primeiro criando uma pasta para o seu aplicativo e depois executando o comando npx (disponível no Node.js 8.2.0):
mkdir express-application
npx express-generatorApós a geração bem-sucedida, o terminal exibe uma lista de pastas/arquivos criados e comandos para instalar dependências e executar o aplicativo. Instale as dependências executando o comando abaixo:
npm installEm seguida, inicie seu servidor web:
DEBUG=myapp:* npm startO aplicativo de esqueleto tem uma rota de índice pré-construída que renderiza uma página inicial básica. Você pode visualizá-la em seu navegador visitando localhost:3000.
Explorando o aplicativo Skeleton Express
Ao abrir o aplicativo Express no editor de código de sua preferência, você encontrará uma estrutura básica que forma a espinha dorsal do seu aplicativo web.
/
|-- /node_modules
|-- /public
|-- /routes
|-- index.js
|-- users.js
|-- /views
|-- error.jade
|-- index.jade
|-- layout.jade
|-- app.js
|-- package.json- node_modules: Esse diretório armazena todas as dependências e bibliotecas instaladas para o projeto.
- public: Contém ativos estáticos como CSS, JavaScript, imagens, etc. Esses arquivos são servidos diretamente no navegador do cliente.
- routes (rotas): Contém arquivos responsáveis pela definição de várias rotas e pelo tratamento de solicitações provenientes de diferentes URLs.
- views: Contém templates ou exibições que o servidor renderiza para criar a interface do usuário. Aqui, error.jade, index.jade e layout.jade são templates escritos na linguagem de templates Jade. Eles ajudam a estruturar e renderizar o conteúdo dinâmico para os usuários.
- app.js: Esse arquivo normalmente serve como ponto de entrada para o aplicativo Express. É nele que o servidor é configurado, o middleware é configurado, as rotas são definidas e as solicitações e respostas são tratadas.
- package.json: Esse arquivo contém metadados sobre o aplicativo. Ele ajuda a gerenciar as dependências e a configuração do projeto.
Entendendo o manuseio de rotas
No seu aplicativo Express, o diretório de rotas é onde as rotas são definidas como arquivos separados. A rota principal, geralmente chamada de rota de índice, reside no arquivo routes/index.js.
Essa rota de índice lida com uma solicitação GET, respondendo com uma página web gerada em HTML pela framework. Abaixo está o trecho de código que ilustra como uma solicitação GET é tratada para renderizar uma página básica de boas-vindas:
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;Se você modificar a função res.render() para res.send()o tipo de resposta muda de HTML para JSON:
var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
res.send({ key: 'value' });
});
module.exports = router;Expandindo os recursos, outra rota é adicionada ao mesmo arquivo, introduzindo um novo endpoint que aceita um parâmetro. Esse trecho de código demonstra como seu aplicativo pode tratar o tráfego em um endpoint diferente, extrair um parâmetro e responder com seu valor em JSON:
/* GET a new resource */
router.get('/newEndpoint', function(req, res, next) {
res.send({ yourParam: req.query.someParam });
});O envio de uma solicitação GET para localhost:3000/newEndpoint?someParam=whatever produzirá uma saída JSON contendo a string “whatever”.
Hospedagem de aplicativos Express e Kinsta
Fazer solicitações da web do seu computador para o seu computador é legal, mas o desenvolvimento web não estará completo até que você saia do localhost. Felizmente, a Kinsta facilita a implantação de aplicativos na web, mesmo que você precise de um banco de dados.
Agora, vamos nos aprofundar na expansão dos recursos do seu aplicativo, integrando a funcionalidade do banco de dados e implantando o aplicativo e o banco de dados na web, permitindo o acesso de qualquer computador.
Antes de implantar o aplicativo Express na hospedagem de aplicativos da Kinsta, é fundamental que você envie o código e os arquivos do aplicativo para o provedor Git escolhido (Bitbucket, GitHub ou GitLab). Certifique-se de que você crie um arquivo .gitignore no diretório raiz do seu aplicativo e inclua node_modules para evitar o envio desses arquivos para o seu provedor Git.
Quando o repositório estiver definido, siga estas etapas para implantar o aplicativo Express na Kinsta:
- Faça login ou crie uma conta para visualizar o painel MyKinsta.
- Autorize a Kinsta com seu provedor Git.
- Clique em Aplicativos na barra lateral esquerda e, em seguida, clique em Adicionar aplicativo.
- Selecione o repositório e a branch a partir da qual você deseja implantar.
- Atribua um nome exclusivo ao seu aplicativo e escolha um local de centro de dados.
- Em seguida, configure seu ambiente de build. Selecione a configuração de máquina de build padrão com a opção Nixpacks recomendada para esta demonstração.
- Use todas as configurações padrão e, em seguida, clique em Criar aplicativo.
A Kinsta funciona com o gerador de aplicativos Express assim que você sai da caixa! Quando você concluir essas etapas, seu aplicativo iniciará automaticamente o processo de build e implantação.
A tela de implantação fornecerá uma URL onde a Kinsta implementará seu aplicativo. Você pode anexar /newEndpoint?someParam=whatever para testar o endpoint criado na seção anterior deste artigo.
Como adicionar um banco de dados ao aplicativo Express
Para a maioria dos aplicativos de nível de produção, ter um banco de dados é essencial. Felizmente, a Kinsta simplifica esse processo, fornecendo serviços de banco de dados totalmente gerenciados que são incrivelmente fáceis de configurar.
Veja como você pode criar um banco de dados na Kinsta:
- Navegue até a seção Bancos de dados na barra lateral do painel MyKinsta.
- Clique em Criar um banco de dados. Configure os detalhes do banco de dados inserindo um nome e selecionando o tipo de banco de dados.
- Selecione a opção PostgreSQL. Um nome de usuário e uma senha do banco de dados são gerados automaticamente:
A etapa de configuração do banco de dados MyKinsta para adicionar um novo banco de dados. - Selecione o mesmo local do centro de dados em que você hospedou seu aplicativo Express e configure o tamanho desejado.
- Confirme as informações de pagamento e clique em Criar banco de dados.
Depois que o banco de dados for criado com sucesso, você poderá criar um novo banco de dados:
- Acesse os detalhes do banco de dados clicando nele. Na página Visão geral, navegue até a seção Conexões internas.
- Selecione o aplicativo apropriado.
- Marque a opção Adicionar variáveis de ambiente ao aplicativo.
- Clique em Adicionar conexão para conectar o banco de dados recém-criado ao seu aplicativo.
Em seguida, copie a string de conexão do banco de dados recém-criado para se conectar a ele com uma ferramenta de banco de dados. Qualquer ferramenta de conexão SQL será suficiente, mas nesta demonstração você usará o Beekeeper. Abra o aplicativo e clique em Importar da URL, cole a string de conexão e clique em Importar. Isso permitirá que você execute o SQL no banco de dados hospedado na Kinsta que você acabou de criar.
Em seguida, crie uma tabela elementar com uma única entrada executando algumas instruções SQL no banco de dados hospedado com sua ferramenta de banco de dados:
CREATE TABLE "States"
( id integer CONSTRAINT states_pk PRIMARY KEY,
state_name varchar(100),
capital varchar(100),
state_bird varchar(100),
"createdAt" TIMESTAMPTZ NOT NULL DEFAULT NOW(),
"updatedAt" TIMESTAMPTZ NOT NULL DEFAULT NOW()
);
INSERT INTO "States"
VALUES(1, 'ohio', 'columbus', 'cardinal');Adicione os seguintes pacotes de banco de dados ao seu projeto:
npm install sequelize pgA dependência sequelize é um ORM para Node.js, e o pg serve como cliente PostgreSQL, permitindo a interação entre aplicativos Node.js e bancos de dados PostgreSQL.
Em seguida, escreva o código do aplicativo que aceita uma solicitação GET com um parâmetro id e retorna as informações do banco de dados associadas a esse id. Para isso, altere seu arquivo index.js de acordo:
var express = require('express');
var router = express.Router();
const { Sequelize, DataTypes } = require('sequelize');
const sequelize = new Sequelize(process.env.CONNECTION_URI, {
dialect: 'postgres',
protocol: 'postgres',
});
const State = sequelize.define('State', {
// Model attributes are defined here
state_name: {
type: DataTypes.STRING,
allowNull: true,
unique: false
},
capital: {
type: DataTypes.STRING,
allowNull: true,
unique: false
},
state_bird: {
type: DataTypes.STRING,
allowNull: true,
unique: false
},
}, {
// Other model options go here
});
async function connectToDB() {
try {
sequelize.authenticate().then(async () => {
// await State.sync({ alter: true });
})
console.log('Connection has been established successfully.');
} catch (error) {
console.error('Unable to connect to the database:', error);
}
}
connectToDB();
/* GET a new resource */
router.get('/state', async function(req, res, next) {
const state = await State.findByPk(req.query.id);
if (state) {
res.send(state)
} else {
res.status(404).send("state not found");
}
});
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
/* GET a new resource */
router.get('/newEndpoint', function(req, res, next) {
res.send({ yourParam: req.query.someParam });
});
module.exports = router;Confirme as mudanças feitas no código e envie-as para o seu repositório Git. Depois, prossiga com a reimplantação manual na Kinsta ou aguarde a implantação automática.
Agora, quando você consultar o endpoint /states com id=1, receberá um estado do banco de dados.
Isso é tudo o que você precisa fazer! Você pode conferir o código completo do projeto no GitHub.
Resumo
Este artigo demonstrou como o framework do Express torna a criação e a implantação de um aplicativo Node.js rápida e fácil. Você pode criar um novo aplicativo com o gerador Express em apenas algumas etapas simples. Com a hospedagem de aplicativos Kinsta, a implantação do aplicativo é simplificada e requer uma configuração mínima.
Você pode usar o framework Express para o desenvolvimento de aplicativos Node.js de forma significativa. Com a Kinsta, você pode levar o impulso que o Express e o Node.js proporcionam para a fase de implantação do seu projeto sem perder tempo com a configuração.
O que você acha do gerador de aplicativos Express? Você já o utilizou para desenvolver algum aplicativo anteriormente? Fique à vontade para compartilhar suas experiências nos comentários abaixo!
Deixe um comentário