Adicionando página na Vercel

Olá, Carlos, tudo bem?

Esse erro acontece porque nesse curso, consumimos uma API local, quando executada ela fica no endereço localhost:3000/videos. Quando essa API não está em execução, ocorre um erro, pois o código está fazendo requisições para esse endereço, que não está ativo.

Ou seja, a parte visual do seu código está no ar, mas a sua API não, por isso, esse erro vai acontecer Carlos.

Mas caso queira ver a sua página funcionando, será necessário executar a API novamente dentro da pasta com o arquivo db.json execute o comando:

json-server --watch db.json

Desta forma você vai conseguir abrir o link do seu site, e o mesmo quando solicitar dados da API do endereço localhost:3000/videos:, ele vai encontrar, pois a API local estará ativa.

Espero ter ajudado Carlos. Se surgirem dúvidas, sinta-se à vontade para perguntar. Estou aqui para ajudá-lo em sua jornada de aprendizagem.

Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Boa noite, poderia explicar melhor como faço para utilizar esse comando em qual linha da pasta eu adiciono ele.

Oi Carlos!

Claro! Vamos lá!

É bastante simples e um passo que você fez anteriormente bem lá no começo do curso, lembra que durante o desenvolvimento desse projeto(AluraPlay), você configurou uma API neste endereço em seu computador o localhost:3000/videos. Seu site está apenas tentando localizar esse endereço novamente. Para fazer isso, abra o deste curso no Vscode e acesse o terminal, que pode ser aberto com CTRL + J, e execute o comando mencionado anteriormente.

json-server --watch db.json

Deixo um gif que também ajuda a exemplificar:

Assim como nessa aula, que a professora utilizar do mesmo comando.

Espero ter ajudado Carlos, abraços!

Boa tarde, como faço para usar uma Api permanente sem ter que ficar usando esse comando, e poder acessar o meu site de outro computador ou celular?

Boa tarde, Carlos! Como vai?

Para usar um API permanente como você disse, você deve colocar outro projeto no Vercel, agora que contenha uma configuração de servidor rodando o json-server que o Victor havia comentado anteriormente.

Para isso siga os seguintes passos:

1. Crie uma nova pasta, dentro dela, copie do AluraPlay ou crie um arquivo com o nome db.json e certifique-se que ele tenha as mesmas informações do db.json presente no projeto AluraPlay.

2. Com o VS Code aberto dentro dessa pasta, abra o terminal e execute o comando npm install --save json-server@0.17.0 para instalar o json-server;

3. Crie um arquivo com o nome "server.js" e cole os seguintes códigos nele:

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

   Esses comandos serão responsável por subir uma fake API, mas desta vez dentro do Vercel, porém, ainda é necessário a criação de mais alguns arquivos para que isso seja possível.

4. Crie outro arquivo, agora chamado "vercerl.json" e cole as seguintes configurações:

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

5. Agora, dentro do arquivo "package.json" adicione a linha de comando "start": "node server.js", dentro da seção de scripts, segue um exemplo:

     "scripts": {
       "start": "node server.js",
       "test": "echo \"Error: no test specified\" && exit 1"
     },
   

6. Para finalizar essa parte, crie um arquivo chamado ".gitignore" e cole o nome da pasta das dependências "/node_modules", para que ela não seja enviado para o GitHub, após isso, envie todo esse projeto para um novo repositório do GitHub.

   Antes de enviar para o GitHub a sua estrutura de arquivos deve estar assim:

7. Após enviar esses arquivos para um repositório do GitHub, abra o Vercel, clique nas sequências de opções "Add new > Project". Assim você será redirecionado para aba de “import”, onde você deve importar o repositório que você havia criado, e por fim realizando o deploy.

8. Ao finalizar o deploy, visite a página do projeto, e caso tenha feito tudo corretamente, deve aparecer a tela que deixei abaixo, nela, clique no link em destaque e copie a url da página que aparecer, algo como "https://aluraplay-fake-api-requisicoes.vercel.app/videos".

   

9. Por fim, acesse o seu projeto do AluraPlay, nele busque o arquivo "conectaApi.js" que está na pasta "js". Nesse arquivo altere todos os links presentes nele para o link que você havia copiado anteriormente. O que apresenta uma pequena diferença é o último link, que deve estar assim:

   `https://aluraplay-fake-api-requisicoes.vercel.app/videos?q=${termoDeBusca}`
   

10. Após fazer essa alteração e enviar ela para o repositório do AluraPlay no GitHub, espere uns momento e tente acessar o link da página que você tinha upado no Vercel, ela deve está com as informações dos vídeos presente na Fake Api que você levantou.

    Caso tenha pressa, você pode usar o link da Fake API que eu envei para o Vercel, ao utilizá-la você precisará apenas fazer os dois útlimos passos, mas aconselho que tente levantar a sua propria Fake API, e caso tenha problemas retorne á esse tópico.

    https://aluraplay-fake-api-requisicoes.vercel.app/videos
    

Espero ter lhe ajudado e bons estudos!

Boa tarde, valeu amigo obrigado pelas dicas vou está fazendo depois te passo um feedback.