DEV Community

Como colocar um projeto no ar com Vercel

Angela Caldas on May 16, 2023

Atualizado em: 22/07/2025 Você fez aquele site maneiro, que te encheu de orgulho, e gostaria de colocar ele online pra mostrar pra família e ami...

Read full post

Ana Clara Castro • May 25 '24

eu ja conhecia o vercel e ja consegui upar dois projetos lá mas ultimamente só aparece o famoso 404 not found mas o projeto ta funcionando direitinho não sei resolver esse problema ;((

Angela Caldas • Jun 18 '24

Vixe, pode ser várias coisas... Às vezes, dependendo do projeto (se for projeto em React ou outro framework, por exemplo) pode ser preciso adicionar um arquivo de configurações vercel.json na raiz do seu projeto. Se for um projeto em HTML básico, pode ser que seu index.html não esteja na raiz do projeto, aí dá esse 404 também...

Douglas • Jul 10

Olá! Mesmo com esse erro, funciona? Eu também estou enfrentando esse problema.

Angela Caldas • Jul 10

Olá, Douglas, tudo bem? Você já tentou ver esse pontos que mencionei acima? Essas são as causas mais comuns

Douglas • Jul 14 • Edited

Poderia me ajudar com o q eu preencho nesse arquivo que vou criar vercel.json?

Angular CLI: 20.0.5
Node: 22.16.0
Package Manager: npm 10.9.2
OS: win32 x64

Angular: 20.0.6
... common, compiler, compiler-cli, core, forms
... platform-browser, router

Package Version

@angular-devkit/architect 0.2000.5
@angular-devkit/build-angular 20.0.5
@angular-devkit/core 20.0.5
@angular-devkit/schematics 20.0.5
@angular/build 20.0.5
@angular/cli 20.0.5
@schematics/angular 20.0.5
rxjs 7.8.2
typescript 5.8.3
zone.js 0.15.1

PS C:\Users\Douglas Amorim\OneDrive\Desktop\Projetos Pessoais\Sync360\frontend>

Angela Caldas • Jul 14

Normalmente, o conteúdo básico do vercel.json, que normalmente já resolve esse problema é

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

Com isso, o vercel.json vai fazer com que a Vercel redirecione todas as rotas para /index.html, que é o entry point do Angular e que vai permitir que ele assume o controle e faça o roteamento corretamente, sem o 404 Not Found.

⚠️ Esse arquivo vercel.json você precisa subir para o repositório do github, ele fica na raiz do projeto. Depois que você subir ele, faz um redeploy na Vercel que deve funcionar.

Douglas • Jul 14

tem alguma forma de fazermos uma call?

Douglas • Jul 14

Consegui!

Angela Caldas • Jul 15

Desculpa não ter visto antes

Angela Caldas • Jul 15

Booooa! <3

Vitória Zoche • Mar 14 '24

Obrigaaada! Não conhecia o vercel, conheci através do @nickgabe e agora graças ao teu artigo vou migrar 😅

Angela Caldas • Mar 14 '24

Que bom, Vitória, fico muito feliz que tenha gostado do artigo e espero que tenha ótimas experiências com a Vercel! Esse artigo trás só o básico do deploy deles, mas a Vercel também é bem configurável pra projetos mais complexos ^^