Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Disponibilização do projeto no Vercel com o uso de mock json-server via Axios

Referente ao curso Vue3: composition API e Vuex

por Rodrigo Augusto Carlos Bispo
| 131.5k xp | 26 posts
Analista de Sistemas

Bom dia!

  1. Cheguei a publicar um projeto encarregado de disponibilizar o recurso db.json: https://json-server-vercel-tasktracker.vercel.app/

  2. O endpoint eu coloquei no baseURL do arquivo /src/http/index.ts do projeto tracker.

  3. O aplicativo tracker funciona utilizando o db.json do item 1 acima, porém de maneira instável, principalemente a parte de tarefas (que às vezes o dado é buscado) e as operações de inclusão/alteração... O tracker pode ser visto aqui:

    3.1. Github: https://github.com/rodrigobispo/tracking-tasks-vue3

    3.2. App: https://tracking-tasks-vue3.vercel.app

  4. Problema verificado durante uns testes: Verificação durante testes realizados

  5. Vez ou outra o projeto editado é exibido, mas talvez seja por causa do valor no componente, visto que não alteração no db.json disponibilizado no item 1...

Quando tiver tempo continuarei pesquisando a fundo as razões dos problemas e certificar se há um modo de rodar tudo certinho no Vercel.

Agradeço se alguém puder apoiar :) Abrs!

2 respostas
por Vinicios Neves
| 996.7k xp | 1098 posts
Instrutor Tech Lead | Tech Educator

Salve, Rodrigo!

O json-server atende mais o cenário de desenvolvimento!

Porém, esse template pode te ajudar a publicá-lo na Vercel e ter a API fake disponível online :)

solução!
por Rodrigo Augusto Carlos Bispo
| 131.5k xp | 26 posts
Analista de Sistemas

Oi Vinicios!

Eu consegui fazer funcionar! : )

Publiquei a api rest json no Render (aqui), em vez de utilizar o Vercel. E funcionou!! : )

Vi que muitas pesssoas também questionaram esse problema e vi que realmente o Vercel possui essa "limitação" em não permitir a edição do Json por post/put. O mecanismo para fazer funcionar lá eu vi que era bem complicado, e descobri o Render.

Então:

  1. O código src/http/index.ts ficou assim:
import axios, { AxiosInstance } from "axios"

const clienteHttp: AxiosInstance = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL_AXIOS,
  headers: {
    "Content-type": "application/json",
  },
})

export default clienteHttp
  1. Onde o conteúdo de process.env.VUE_APP_BASE_URL_AXIOS é https://json-server-tasktracker.onrender.com (url da api/rest que fiz o deploy no render)
  2. A aplicação continua rodando no link 3.2 acima, no Vercel, aqui.
  3. A API/Rest Json está rodando no Render, (aqui), cujo código está aqui (com o db.json editado de acordo com o tracker). Esse projeto foi gerado a partir do link que você citou: https://github.com/kitloong/json-server-vercel

Obrigado!!