DEV Community

Cover image for Como fazer Deploy de uma api com Json-Server
Ezequiel Otoni
Ezequiel Otoni

Posted on

Como fazer Deploy de uma api com Json-Server

Todo dev Front-End iniciante já ficou perdido na hora de fazer deploy de um projeto que dependia de uma fake api com Json-Server. Localmente é uma maravilha. Mas, e na hora de enviar pra um amigo, postar seu projeto no grupo da familia ou portfólio? Bom, nesse artigo, trago duas formas de fazer o deploy da sua api bem rápido e simples.

Sumário

Criando a Database
Configurando o Json-Server
Subindo a aplicação no Github
Deploy no Glitch
Deploy na Vercel


Criando a Database

Primeiro vamos criar uma pasta para iniciar nosso projeto. No seu editor de código favorito abra a pasta e crie um arquivo com o nome db.json que será sua database. Nesse arquivo cole ou crie seu arquivo json.



{
  "produtos": [
    {
      "nome": "Óculos de sol",
      "preco": "120,00",
      "id": 1
    },
    {
      "nome": "Calça",
      "preco": "60,00",
      "id": 2
    },
    {
      "nome": "Boné adidas",
      "preco": "85,00",
      "id": 3
    },
    {
      "nome": "Relógio",
      "preco": "350,00",
      "id": 4
    },
    {
      "nome": "Jaqueta",
      "preco": "90,00",
      "id": 5
    }
  ]
}


Enter fullscreen mode Exit fullscreen mode

Agora nossa pasta está assim e o próximo passo é configurar o json-server.

Print da estrutura de arquivos do projeto


Configurando o Json-Server

Primeiro vamos acessar o terminal e, dentro da pasta do projeto, dar o comando npm init -y para criarmos o arquivo package.json que terá todas as configurações. Ainda no terminal vamos instalar o Json-Server com o comando npm install json-server. Após a instalação serão gerados automaticamente um arquivo package-lock.json e a pasta node_modules. Para finalizar vamos criar, na raiz do projeto, o arquivo server.js e adicionar nele as configurações de conexão com o Json-Server.



const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();

server.use(middlewares);
server.use(router);
server.listen(3000, () => {
  console.log('JSON Server is running')
});


Enter fullscreen mode Exit fullscreen mode

Nos scripts do package.json, vamos adicionar a linha "start": "node server.js" que contém o comando pra iniciar a aplicação.

Se você fez tudo correto até aqui, sua pasta deve estar assim:

Print da estrutura de arquivos do projeto

E assim seu arquivo package.json:



{
  "name": "exemplo-api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "json-server": "^0.17.4"
  }
}



Enter fullscreen mode Exit fullscreen mode

Caso queira, você pode editar o nome e adicionar uma descrição. Note que o json-server já aparece como dependência do projeto e o comando start já está na lista de scripts.
Para conferir se deu certo, no terminal digite o comando npm start e, se funcionar, teremos essa mensagem no console:

Print da mensagem do console do projeto
Ao acessar o endereço http://localhost:3000 já podemos ver a página de sucesso do json-server. E ao acessar o endpoint http://localhost:3000/produtos já é possível fazer um CRUD localmente.

Print do navegador rodando o projeto


Subindo a aplicação no Github

Agora vamos criar um repositório no github para o nosso projeto, fazer os commits e subir a aplicação. Mas antes, crie um arquivo .gitignore e adicione nele a pasta node_modules pois não é necessessário subir ela. Assim deve ficar o seu repositório.

Print do repositóio do projeto
Mais informações aqui.


Deploy no Glitch

O Glitch é uma plataforma gratuita para hospedagem de páginas e aplicações web. Você pode acessar criando uma conta com email ou automaticamente com sua conta do github. É bem simples.
Após fazer login, no canto superior direito, clique no botão new project e, depois no botão import from github. Cole o link do repositório do projeto na modal que vai abrir e espere o build ficar pronto. É super rápido.

gif ensinando o passo a passo do deploy np glitch

Ao finalizar o build você verá a tela com todos os arquivos do projeto.
No cabeçalho, clique no botão share e então teremos acesso à url da nossa aplicação.

gif mostrando como pegar a url da imagem

Pronto. Essa url já pode ser usada nos seus projetos com todas as funcionalidades do Json-Server!

Print do resultado de uma requisição get no postman
Vale lembrar que, o glitch por ser grátis, demora uns segundos pra responder no primeiro acesso. Mas isso não vai atrapalhar sua aplicação.


Deploy na Vercel

Assim como o Glitch, a Vercel também é uma plataforma muito utilizada para páginas e aplicações web. Se você nunca usou para subir um projeto ou, quer criar uma conta, sugiro esse artigo da Angela Caldas sobre Como colocar um projeto no ar com Vercel.

Conta criada, vamos seguir com o deploy da nossa api. Para hospedar na vercel precisamos fazer uma alteração no nosso repositório. Vamos adicionar um novo arquivo na raiz do nosso projeto e commitar pro github. Garanta que o arquivo se chame vercel.json.



{
  "version": 2,
  "builds": [
    {
      "src": "server.js",
      "use": "@vercel/node",
      "config": {
        "includeFiles": ["db.json"]
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "server.js"
    }
  ]
}


Enter fullscreen mode Exit fullscreen mode

Garanta que o nome do arquivo dentro de "includeFiles", seja o mesmo do arquivo de database do projeto. No nosso caso db.json. E agora nosso repositório está assim:

print do repositório do projeto

Feito isso, agora já podemos fazer o deploy na Vercel. Primeiro, no canto superior direito vamos clicar no botão Add New e, depois no link Project.

gif da vercel
Em seguida, vamos procurar o nosso projeto na lista de respositórios e clicar no botão import. Na tela de build é possível editar o nome do projeto que vai estar na url da aplicação. Para finalizar vamos clicar no botão deploy. Agora é só aguardar o build ficar pronto.

gif do deploy na vercel

Agora já temos a url da nossa api. Clique no banner e você será redirecionado para a tela de sucesso do Json-Server. E terá acesso a url da api para usar nos seus projetos com todas as funcionalidades do Json-Server!

Gif do projeto no site da vercel


Conclusão

Como vimos é bem fácil e rápido hospedar nossas apis de testes e estudos. Aqui eu trouxe duas alternativas simples e que resolvem o problema de quem precisa fazer requisições GET/PUT/POST/DELETE nas suas aplicações. Se você conhece alguma outra forma de hospedar uma aplicação, coloque nos comentários para ajudar a comunidade.

Grande abraço !!!

Top comments (8)

Collapse
 
sucodelarangela profile image
Angela Caldas

Excelente artigo, Zé! Bem explicado e objetivo!

Collapse
 
zeotoni profile image
Ezequiel Otoni • Edited

Muito Obrigado Angela! Tu é sempre uma grande inspiração :)

Collapse
 
pedrobarroso-n profile image
Pedro Barroso

Valeu ai cara

Collapse
 
zeotoni profile image
Ezequiel Otoni

Eu que agradeço Pedro. Espero ter ajudado XD!

Collapse
 
victorcrisostomo profile image
Victor Crisostomo Olivieira

Olá, Segui o tutorial mas ta apresentando um erro 500. Será que vc poderia me ajudar?
Image description

Collapse
 
alexandre_guedes_f669170c profile image
Alexandre Guedes

A nível de ajuda para alguém que veio a ter o mesmo problema, no meu caso passei pelo mesmo erro e corrigi alterando a versão do meu json-server (estava utilizando a ultima versão, no momento deste post v1.0.0-beta.1). Usando uma versão anterior rodou perfeitamente nos 2 exemplos citados acima!

Collapse
 
zeotoni profile image
Ezequiel Otoni

Muito obrigado pela contribuição Alexandre. Que bom que deu certo. Grande abraço XD!

Collapse
 
zeotoni profile image
Ezequiel Otoni

Desculpa a demora Victor, mas se você não encontrou solução posso te ajudar sim.