Executando verificação de segurança...
2
OtavioCleyderman
2 min de leitura ·

Deploy de um projeto React/Vite na vercel - Problema nas rotas e recarregar página retornando 404

Boa noite, pessoal. Todos bem?

Bom, como o título já dá o spoiler, estou sofrendo com deploy. Tenho um projeto realizado em React/vite, meio que acabei o primeiro passo do projeto e já queria ver ele rodando, por exemplo na vercel.

Até consegui realizar o deploy, achei que não conseguiria kkkk. O site até abre normalmente, acessa as rotas, mas se alguma rota recarrega a página ou o usuário atualiza a página, com exceção da página principal, ocorre o retorno 404.

Retorno da vercel após recarregar a página

App Screenshot

Com algumas pesquisas e de forma bem simples o que entendi é que as rotas por si só no front end não são entendidas pela vercel, sendo assim ao recarregar a página ocorre o retorno 404 pq não foi possível encontrar a página requisitada no servidor.

Agora, se realmente entendi certo, de forma simples seria isso mesmo?

Mas, o mais importante, o que posso fazer para resolver isso e ter o projeto rodando na vercel? Ou então tem outro lugar para rodar que resolva o problema?

🔗 Links

Código no github

Site na vercel

Github pages

Tentei também colocar no github pages, mas após o deploy por lá a página ficou branca apenas e no inspecionar só apareceu o seguinte erro:

Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.

Help me kkkkk

Se alguém souber como poderei resolver esses problemas e ter o projeto rodando na vercel ou até mesmo github pages ajudaria muito =)

Carregando publicação patrocinada...
2
matheuspazinati

Isso acontece porque a Vercel interpreta e espera que o seu site tenha várias rotas e páginas, porém sua aplicação é uma SPA (Single Page Application), ou seja, ela possui uma única página, onde o conteúdo é alterado de acordo com a rota (isso ocorre por de baixo dos panos). Para solucionar, crie um arquivo vercel.json na raíz do projeto, e coloque o seguinte código:

{
  "rewrites":  [
    {"source": "/(.*)", "destination": "/"}
  ]
}

Testa ai e vê se deu certo. Abraço

2
OtavioCleyderman
Autor
Autor

Cara, deu super certo. Funcionou \o/
Inclusive no commit inclui de quem foi a solução e onde consegui: (29/11) Testando solução para deploy na vercel sugerido por matheuspazinati no Tabnews.com.br

Mano, eu estava quebrando muita a cabeça em como resolver e na internet, talvez pelo jeito de eu pesquisar, não encontrava nada. Só a mesma informação de rotas e tudo mais sobre provaveis motivos do erro.

Agora é ir ajeitando o layout e preparando as novas funcionalidades hehehe

Muito obrigado mesmo \o/

2
matheuspazinati

Fico feliz pela menção no commit. Isso aconteceu comigo em um projetos dias atrás também kkkkkkkk Se você reparar no código da solução, ele bate com a explicação do problema. Básicamente ele está dizendo: Olha Vercel, quando você receber uma requisição em qualquer rota após "/", devolva para "/", que eu saberei o que fazer com esta requisição. Desculpa pelo texto longo, é que eu gosto de explicar porque algo da certo ou errado kkkkkkkk Abraço.

1
2
josanjohnata

Opa, Matheus! Blz? Pra mim a página está em branco, tentei a solução que vc sugeriu a cima, mas não resolveu, ☹️ Ainda estou tentando outros meios para resolver isso.

1
1
1
1
pedrofdnn

Estou enfretando o mesmo problema mais não consegui tenho pensado e pesquisado mais nada disso ainda funcionou gostaria de compartilhar a configuração das minhas rotas.

{ // pagina padrão como home page path: "/", element: <App />, errorElement: <ErroPage />, // componente base para páginas children: [ { path: "/", element: <HomePage />, }, { path: "/search/:query", element: <SearchPage />, }, { path: "/contact", element: <ContactPage />, }, ], }, ]);

quando chega pra parte de pesquisa ele da esse erro, não sei se e por causa da query ou so Deus sabe oque. se alguem puder me ajudar tambem agradeço de mais. estou em transição de carreira e aprender sozinho e muito tenso. mais acredito que vou conseguir.

1
1
filipeleonelbatista

Fiz uma migração de uma aplicação que eu to desenvolvendo e tive o mesmo problema.Na minha maquina funciona mas na vercel não tava rodando. Migrei do CRA (Create React App) para usar o Vite, aí tive esse retonro toda a vez que digitava o / alguma coisa. Copiei e colei essa regra subi e Foi

Obrigado @matheuspazinati! Excelente pergunta @OtavioCleyderman me ajudou muito!

1
0
0