Como fazer Deploy de uma api com Json-Server

#json #mocking #begginers #frontend

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
    }
  ]
}

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

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')
});

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:

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"
  }
}

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:

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.

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.

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.

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.

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

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"
    }
  ]
}

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:

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.

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.

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!

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 !!!