Como fazer Deploy de uma api com Json-Server
Tags: json, mocking, begginers, frontend
Published: 2023-10-15 21:05:55


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](#chapter-1)
[Configurando o Json-Server](#chapter-2)
[Subindo a aplicação no Github](#chapter-3)
[Deploy no Glitch](#chapter-4)
[Deploy na Vercel](#chapter-5)

---

###Criando a Database<a name="chapter-1"></a>
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.

```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.

![Print da estrutura de arquivos do projeto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nf2fxmafhe782e0crqle.png)

---

###Configurando o Json-Server<a name="chapter-2"></a>
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.

```js
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: 

![Print da estrutura de arquivos do projeto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obxzzeq2anzwa3gl7ry4.png)

E assim seu arquivo package.json: 

```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:

![Print da mensagem do console do projeto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6c34ny6y56l3nhcbil1.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dplcfbflzxb677vk3a5w.png)

---

###Subindo a aplicação no Github<a name="chapter-3"></a>
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vcioz34po1rlbnwqv6pf.png) 
Mais informações [aqui](https://www.youtube.com/watch?v=tpIPYktAAhI&t=250s).


---

###Deploy no Glitch<a name="chapter-4"></a>
O [Glitch](https://glitch.com/) é 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s52xmmmin4lkyawymp9b.gif)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9na3a6nimtdnlwu6zmr5.gif)

Pronto. Essa url já pode ser usada nos seus projetos com todas as funcionalidades do [Json-Server](https://github.com/typicode/json-server)!

![Print do resultado de uma requisição get no postman](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/theoqjzi5injccpffcro.png)
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<a name="chapter-5"></a>
Assim como o Glitch, a [Vercel](https://vercel.com/) 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](https://dev.to/sucodelarangela) sobre [Como colocar um projeto no ar com Vercel](https://dev.to/sucodelarangela/como-colocar-um-projeto-no-ar-com-vercel-2m9d).



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`. 

```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: 


![print do repositório do projeto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/758rnhwryt6fnxax1aus.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nie8orl7aiwu5kmsuc1x.gif)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gc97b7d7tr4xun6s3jkt.gif)

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](https://github.com/typicode/json-server)! 

![Gif do projeto no site da vercel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sx5ix5rjxhbfqqd07t69.gif)

---

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