Como Criar uma API REST com Node.js e Express do ZERO: Guia Completo

Neste guia você vai entender como funciona uma API REST linha por linha, com o código completo disponível para download!

Criar uma API REST pode parecer intimidador no início, mas com as ferramentas certas e um passo a passo bem explicado, você verá que é mais simples do que imagina.

Com Node.js e Express, duas das tecnologias mais populares no ecossistema JavaScript, você terá uma API funcional que retorna dados em formato JSON e estará preparado para expandir suas funcionalidades.

Uma API REST com Node.js e Express sai em cinco comandos: npm init -y para criar o projeto, npm install express, um arquivo api.js com const app = express() e uma rota app.get devolvendo JSON, e node ./api.js para subir o servidor na porta 3000. Depois é só acessar localhost:3000 no navegador e ver a resposta.

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

O que é uma API REST?

Antes de mergulharmos no código, é essencial entender o que é uma API REST e por que ela é tão importante no desenvolvimento de aplicações modernas.

• API (Application Programming Interface): É como se fosse uma ponte, uma interface que permite a comunicação entre diferentes sistemas. Por exemplo, quando você usa um aplicativo de previsão do tempo, ele se comunica com uma API para obter os dados meteorológicos de uma fonte.
• REST (Representational State Transfer): É um estilo arquitetural que define um conjunto de boas práticas para criar APIs escaláveis (fáceis de adaptar) e de fácil manutenção. APIs RESTful seguem princípios como o uso de métodos HTTP (GET, POST, PUT, DELETE) para realizar operações e retornar dados em formatos como JSON.

Por que Node.js e Express?

• Node.js: É um ambiente de execução JavaScript que permite criar aplicações que rodam no servidor de forma eficiente e leve. Ele tem a vantagem de ser bem leve, pois é baseado no motor V8 do Google Chrome, e é amplamente utilizado pra construir APIs e aplicações em tempo real (como jogos online, onde as informações precisam ser atualizadas instantaneamente).
• Express: É um framework minimalista para Node.js que facilita a criação de APIs e aplicações web. Ele é leve, flexível e conta com uma grande comunidade de desenvolvedores.

Juntos, Node.js e Express formam uma combinação poderosa para desenvolver APIs rápidas, escaláveis e de fácil manutenção.

Passo a Passo: Criando uma API REST com Node.js e Express

Vamos colocar a mão na massa e criar uma API REST simples, mas funcional.

Siga os passos abaixo:

1. Configuração do Ambiente

Com o VS Code aberto e o Node.js instalado (se precisar, consulte o nosso guia que mostra como fazer as duas coisas!), navegue até a pasta do projeto utilizando o terminal.

Antes de começar, certifique-se de ter o Node.js e o npm (Node Package Manager) instalados. Você pode verificar a instalação com os comandos:

node -v
npm -v

2. Inicializando o Projeto

Crie uma pasta para o seu projeto e, dentro dela, execute o comando abaixo para inicializar um novo projeto Node.js:

npm init -y

Isso criará um arquivo package.json, que armazena as informações e dependências do projeto. O -y serve para aceitar as configurações de forma padrão, sem precisar responder a perguntas.

Antes de seguir, para o bom funcionamento dos módulos, vá no arquivo package.json e adicione esta linha, entre as linhas “description” e “dependencies”:

“type”: “module”,

3. Instalando o Express

Agora, instale o Express usando o npm:

npm install express

Isso adicionará o Express como uma dependência do seu projeto. O Express será responsável por gerenciar as rotas e requisições da sua API.

4. Criando o Arquivo da API

Antes de prosseguir, se você não domina o básico de JavaScript e não sabe, por exemplo, o que é uma arrow function, sugerimos a leitura deste post com tudo o que você precisa saber sobre JavaScript antes de aprender React.

Se você sabe o que é uma arrow function, vai ver que usaremos uma aqui embaixo. Crie um arquivo chamado api.js e adicione o código:

// Importando o Express
import express from "express";

// Criando uma instância do Express
const app = express();

// Definindo a porta do servidor
const PORT = 3000;

// Simulando um banco de dados com um array
const arrResponse = [
  { name: "Diego", company: "Hashtag Programação" },
  { name: "Alon", company: "Hashtag Treinamentos" },
];

// Rota GET para a raiz da API
app.get("/", (req, res) => {
  res.json(arrResponse); // Retorna o array em formato JSON
});

// Iniciando o servidor
app.listen(PORT, () => console.log(`O servidor está rodando na porta ${PORT}`));

5. Executando a API

No terminal, execute o comando abaixo para iniciar o servidor:

node ./api.js

Se tudo estiver certo, você verá a mensagem: "O servidor está rodando na porta 3000".

6. Testando a API

Abra o navegador e acesse http://localhost:3000/.

Você verá a resposta da API em formato JSON:

[
  { "name": "Diego", "company": "Hashtag Programação" },
  { "name": "Alon", "company": "Hashtag Treinamentos" }
]

Entendendo o Código

Vamos detalhar o que cada parte do código faz:

Importação do Express

import express from "express";

Aqui, estamos importando o módulo express para usar suas funcionalidades.

Criação do Servidor

const app = express();

Criamos uma instância do Express, que será o núcleo da nossa API.

Definição da Porta

const PORT = 3000;

Definimos a porta em que o servidor vai rodar. A porta 3000 é comumente usada para desenvolvimento.

Simulação de um Banco de Dados

const arrResponse = [
  { name: "Diego", company: "Hashtag Programação" },
  { name: "Alon", company: "Hashtag Treinamentos" },
];

Usamos um array para simular um banco de dados. Em um projeto real, você provavelmente usaria um banco de dados como MongoDB ou MySQL.

Rota GET

app.get("/", (req, res) => {
  res.json(arrResponse);
});

Aqui, definimos uma rota GET para a raiz da API (/). Quando alguém acessar essa rota, a API retornará o array arrResponse em formato JSON.

Inicialização do Servidor

app.listen(PORT, () => console.log(`O servidor está rodando na porta ${PORT}`));

Finalmente, iniciamos o servidor na porta definida e exibimos uma mensagem no console para confirmar que está tudo funcionando.

Full Stack Impressionador

Essa é uma trilha de especialização que vai te tornar um verdadeiro Desenvolvedor Web Full Stack, dominando todas as principais tecnologias usadas tanto para o Front End quanto para o Backend e ainda para Mobile, construindo projetos práticos e exercícios aplicados à realidade das empresas. Tudo o que você precisa para se tornar um Desenvolvedor Full Stack em um único lugar.

Começar agora

Adicionando Upload de Imagens com Multer

Agora vamos expandir a API para permitir o upload de imagens usando o Multer, um middleware que lida com dados de formulários multipartes, como arquivos. Isso é perfeito para cenários como upload de fotos de perfil ou documentos.

Passos para Implementar o Upload

1. Instalando o Multer

Instale o Multer com npm install multer no terminal.

2. Configurando o Multer na API

Atualize o arquivo api.js para incluir o Multer e uma rota POST para upload de imagens:

// Importando Express e Multer
import express from "express";
import multer from "multer";

// Configurando o Multer para salvar arquivos na pasta 'uploads'
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "uploads/"); // Pasta onde as imagens serão salvas
  },
  filename: (req, file, cb) => {
    const uniqueSuffix = Date.now() + "-" + Math.round(Math.random() * 1e9);
    cb(null, uniqueSuffix + "-" + file.originalname); // Nome único com extensão
  },
});
const upload = multer({ storage });

// Criando uma instância do Express
const app = express();

// Definindo a porta do servidor
const PORT = 3000;

// Simulando um banco de dados com um array
const arrResponse = [
  { name: "Diego", company: "Hashtag Programação" },
  { name: "Alon", company: "Hashtag Treinamentos" },
];

// Rota GET para a raiz da API
app.get("/", (req, res) => {
  res.json(arrResponse);
});

// Rota POST para upload de imagens
app.post("/imagem", upload.single("imagem"), (req, res) => {
  console.log(req.file); // Exibe informações do arquivo no console
  res.json({ message: "Imagem enviada com sucesso!" });
});

// Iniciando o servidor
app.listen(PORT, () => console.log(`O servidor está rodando na porta ${PORT}`));

3. Criando o Front-End para Upload

Crie um arquivo index.html para enviar imagens para a API:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Upload com Multer</title>
</head>
<body>
  <h1>Upload de Imagens</h1>
  <input type="file" id="file" name="imagem">
  <button id="btnEnviar">Enviar Arquivo</button>

  <script>
    const btnEnviar = document.querySelector("#btnEnviar");
    const inputFile = document.querySelector("#file");

    btnEnviar.addEventListener("click", async (event) => {
      event.preventDefault(); // Impede o reload da página
      const arquivo = inputFile.files[0];
      const formData = new FormData();
      formData.append("imagem", arquivo);

      const response = await fetch("http://localhost:3000/imagem", {
        method: "POST",
        body: formData,
      });
      const json = await response.json();
      alert(json.message);
    });
  </script>
</body>
</html>

4. Resolvendo Problemas de CORS

Para evitar erros de CORS (Cross-Origin Resource Sharing) ao enviar arquivos do front-end (ex.: porta 5500) para a API (porta 3000), instale o middleware cors com npm install cors no terminal.

Atualize o api.js para incluir o CORS:

import express from "express";
import multer from "multer";
import cors from "cors"; // Importando o CORS

// Configurando o Multer
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "uploads/");
  },
  filename: (req, file, cb) => {
    const uniqueSuffix = Date.now() + "-" + Math.round(Math.random() * 1e9);
    cb(null, uniqueSuffix + "-" + file.originalname);
  },
});
const upload = multer({ storage });

const app = express();
app.use(cors()); // Habilitando CORS

const PORT = 3000;
const arrResponse = [
  { name: "Diego", company: "Hashtag Programação" },
  { name: "Alon", company: "Hashtag Treinamentos" },
];

app.get("/", (req, res) => {
  res.json(arrResponse);
});

app.post("/imagem", upload.single("imagem"), (req, res) => {
  console.log(req.file);
  res.json({ message: "Imagem enviada com sucesso!" });
});

app.listen(PORT, () => console.log(`O servidor está rodando na porta ${PORT}`));

5. Executando e Testando o Upload

1. Crie uma pasta chamada uploads na raiz do projeto para armazenar as imagens.
2. Adicione um script ao package.json para reiniciar automaticamente o servidor com alterações:

"scripts": {
  "start": "node api.js",
  "dev": "node --watch api.js"
}

3. Inicie o servidor com: npm run dev

4. Abra o index.html em um servidor local (ex.: extensão Live Server no VS Code, porta 5500).
5. Selecione uma imagem, clique em "Enviar Arquivo" e verifique:
   • No console: Informações do arquivo (nome, tamanho, etc.).
   • Na pasta uploads: A imagem salva com um nome único (ex.: 123456789-logo.webp).
   • No navegador: Um alerta com a mensagem "Imagem enviada com sucesso!".

Entendendo o Código de Upload

• Multer: O middleware multer processa o formulário multipartes, salvando o arquivo na pasta uploads com um nome único (data + número aleatório + nome original).
• Rota POST: A rota /imagem usa upload.single("imagem") para processar um único arquivo com a chave imagem.
• Front-End: O script usa a API Fetch para enviar o arquivo em um FormData. O event.preventDefault() impede o reload da página.
• CORS: O middleware cors resolve problemas de requisições entre diferentes domínios (ex.: front-end na porta 5500 e API na 3000).

Dicas para Uploads

• Extensões de Arquivo: O Multer preserva a extensão original (ex.: .webp) ao usar file.originalname.
• Múltiplos Arquivos: Use upload.array("imagens", 10) para permitir até 10 arquivos, por exemplo.
• Validações: Adicione filtros no Multer para aceitar apenas imagens (ex.: .jpg, .png).
• Deploy: Em produção, escolha portas compatíveis e configure o destino dos arquivos (ex.: serviços como AWS S3).

Perguntas frequentes

Conclusão

Criar uma API REST com Node.js e Express é uma habilidade essencial, e adicionar funcionalidades como upload de imagens com Multer expande ainda mais suas possibilidades. Neste guia, você aprendeu a configurar um projeto, criar rotas básicas, testar a API e implementar upload de arquivos com um front-end simples.

Continue explorando! Adicione mais rotas (POST, PUT, DELETE), integre um banco de dados real ou experimente validações avançadas com Multer. Temos diversos conteúdos como este sobre programação Full Stack para você aprender cada vez mais e por seus conhecimentos em prática!

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

O que você aprende neste vídeo

Resposta rápida: API REST é uma interface que responde às requisições HTTP GET, POST, PUT e DELETE. Com Node e Express o esqueleto é curto: npm init -y, npm i express, importar o express, criar o app e chamar app.listen(3000). Cada rota é um método do app, e a resposta sai com res.send para texto ou res.json para dados.

Neste vídeo (16 min):

• 0:00 - O que a aula constrói: uma API REST do zero com Node e Express
• 1:00 - O que é API, e o que a sigla REST quer dizer na prática
• 1:50 - Os quatro métodos HTTP que uma API REST precisa tratar
• 2:50 - O que cada método faz: buscar, criar, alterar e apagar
• 3:35 - Criando o package.json com npm init -y
• 4:10 - Instalando o Express, e o que aparece dentro de node_modules
• 4:55 - O type module no package.json, para usar import em vez de require
• 5:30 - Importando o Express e criando o app
• 6:15 - app.listen: a porta que o servidor escuta, e a função de retorno
• 7:10 - Template string para imprimir a porta, e a arrow function enxuta
• 8:10 - Rodando o arquivo com node, e abrindo o localhost no navegador
• 9:00 - O Cannot GET que aparece quando a rota não existe
• 10:00 - A primeira rota com app.get, e o par request e response
• 13:20 - Respondendo em JSON com res.json, e o watch que reinicia sozinho

Trechos do vídeo:

• REST é um conjunto de boas práticas para a criação de APIs escaláveis.
• Toda requisição que você faz pela URL do navegador é do tipo GET.
• Com o watch ele fica rodando, e toda vez que eu modificar alguma coisa ele reinicia sozinho.