DEV Community

Cover image for Crie uma API simples (CRUD) com JSON Server
Thiago Silva Lopes
Thiago Silva Lopes

Posted on • Edited on

4 1 1 1

Crie uma API simples (CRUD) com JSON Server

Nesse post veremos como criar uma API para requisições Post, Get, Put & Delete, utilizando JSON Server.

Abra o seu terminal, navegue para dentro da pasta do seu projeto, e siga o passo a passo:

👨🏻‍💻 Iniciando API e dependências:

  1. Criamos um package.json para administrar esse projeto, usando o comando:
    npm init -y

  2. Instalando as dependências mínimas pro NPM funcionar, digite no terminal:
    npm i

  3. Instalamos o JSON Server globalmente com o comando:
    npm i -g json-server

  4. E instalamos o JSON Server também como uma dependência de projeto! (No package.json 😉):
    npm i json-server

📚 Conectando a DataBase:

Criamos/adicionamos o arquivo com extensão 'json' com nossa dB. Mas, para que as requisições funcionem corretamente, sua dB precisa conter:

  • Todos os dados dentro de uma única array, definida com um nome "Dados": []
  • Array (com nome) envolvida em colchetes, ficando da seguinte forma:
{
  "Dados": [
    {
      "text": "dado1",
      "id": 1
    },
    {
      "text": "dado2",
      "id": 2
    }
  ],
 "OutrosDados": []
}
Enter fullscreen mode Exit fullscreen mode
  1. Executamos o JsonServer na nossa dB com o comando:
    json-server --watch NomeDaSuaDb.json
    E pronto! O JSON-Server já vai criar automaticamente uma rota pra cada array que você criou na sua db.json! 😍😎

  2. No package.json, no objeto de "scripts" trocamos o script "test" para "dev", com o seguinte conteúdo:
    "dev": "json-server --watch NomeDaSuaDb.json --port 3000"

🥳 Iniciando API

1- Criamos na pasta raiz do projeto um novo arquivo de nome "server.js" com o seguinte código dentro dele:

const jsonServer = require("json-server");
const server = jsonServer.create();
const router = jsonServer.router("NomeDaSuaDb.json"); //👈🏽
const middlewares = jsonServer.defaults();
const port = process.env.PORT || 3000;

server.use(middlewares);
server.use(router);

server.listen(port);
Enter fullscreen mode Exit fullscreen mode

2- Adicione na linha 3 o nome da sua database e pronto❗ Sua API com JSON Server está finalizada, e pronta para fazer o deploy 🙌🎆

🏠 Deploy no Heroku

Você pode fazer o deploy da sua API em qualquer serviço de hospedagem da sua preferência. Recomendo pessoalmente o Heroku pois sempre utilizo a plataforma para hospedar minhas próprias API's.

No Heroku, há os "dynos", que sãos unidades que representam o quanto sua aplicação pode ficar disponível/online.

Tanto na versão gratuita quanto paga, nossa API hiberna em horários convenientes para utilizar menos dynos. Caso você necessite de acesso EXTREMO e não se preocupe com todos os seus dynos serem gastos rapidamente, você pode impedir esse processo de hibernação.

Para fazer isso gratuitamente, entre no site da Kaffeine, e insira o nome da sua aplicação no Heroku (O mesmo nome que aparece lá na sua dashboard 👈🏽

  1. Clique no botão "Give my app a caffeine shot every 30 minutes" e PRONTO!!

  2. Sua API ou aplicação não entrará mais em hibernação 😉

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (1)

Collapse
 
gabrielrodrigues profile image
Gabriel Rodrigues Ricardo

Achei que no seu post teria os métodos HTTP rs

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay