DEV Community

Cover image for Como colocar um projeto no ar com Vercel
Angela Caldas
Angela Caldas

Posted on

Como colocar um projeto no ar com Vercel

Você fez aquele site maneiro, que te encheu de orgulho, e gostaria de colocar ele online pra mostrar pra família e amigos, mas não sabe como fazer isso? Chega mais!

Colocar seu projeto no ar (ou fazer o deploy, como costumamos falar) pode ser algo muito simples e existem diversas ferramentas online onde você pode publicar gratuitamente o seu site, como Github Pages e Vercel. E é sobre esse último que vamos falar hoje!

Direto ao ponto:
O que é a Vercel?
Colocando o projeto no ar
Selecionando o projeto para deploy
Configurando o projeto
Mudando a URL do seu site publicado
Conclusão


O que é a Vercel?

Tela da Vercel

Segundo o próprio site, a Vercel é uma plataforma de nuvem "para desenvolvedores front-end, proporcionando velocidade e confiança que inovadores precisam para criar no momento da inspiração."

A Vercel possibilita que publiquemos nossas aplicações front-end e, por ser a empresa que mantém a estrutura de desenvolvimento web Next.js, podemos concluir que ela também é a ferramenta ideal para publicações de projetos com frameworks ou bibliotecas front-end (como React ou Vue, por exemplo).


Colocando o projeto no ar

Passo 1 - Criando sua conta

Para criar uma conta na Vercel, o ideal é que você já tenha uma conta em algum provedor Git, como o Github, Gitlab ou BitBucket. Quando você cria sua conta na Vercel usando algum provedor Git, você automaticamente vincula as duas contas, o que facilita o processo!

  • Acesse https://vercel.com/ e, no canto superior direito, clique em Sign Up;
  • Em Create Your Vercel Account, selecione a opção Hobby, insira um nome de usuário no input e clique em Continue;
  • Em Let's connect yout Git provider, selecione o seu provedor Git na lista (no meu caso, foi o Github).

Processo de sign up na Vercel


Passo 2 - Selecionando o projeto para deploy

Após fazer o SignUp / Login, você verá uma tela com uma barra de pesquisa e, do lado direito, um botão Add New.... Clique nesse botão e selecione a opção Project. Você será redirecionado para outra página:

Adicionando novo projeto

Em Import Git Repository você vai ver uma lista dos seus repositórios mais recentes. Aqui também é possível adicionar uma nova conta do Github, adicionar um novo provedor Git ou até mesmo procurar algum repositório que não esteja dentre os mais recentes.

Escolha o projeto que deseja publicar e clique em Import. Você será redirecionado para outra página:

Importando o projeto


Passo 3 - Configurando o projeto

Aqui é onde você configura o deploy da sua página. Mas calma lá! Se você desenvolveu seu projeto com HTML, CSS e JS, não é necessário configurar absolutamente nada! Até mesmo se você desenvolveu utilizando algum framework ou biblioteca, como React, Vue ou Angular, a Vercel automaticamente detecta qual tecnologia você utilizou e já deixa tudo pré-configurado.

Nessa nova tela, em Configure Project, tudo que você deve fazer é clicar em Deploy. O processo de publicação deve demorar apenas alguns segundos e seu site finalmente será publicado. Simples assim!

Lembre-se: Se estiver fazendo um projeto sem frameworks, mantenha o seu arquivo HTML principal (o index.html) na pasta raiz do seu projeto.

Processo de deploy

A Vercel até comemora de tão fácil que é!

Mudando a URL do seu site publicado

Quando a Vercel publica seu site, ela acaba usando essa estrutura para gerar o endereço do seu site:

NOME_DO_REPOSITÓRIO + VERCEL.APP
Enter fullscreen mode Exit fullscreen mode

Porém, se já houver algum projeto publicado com o mesmo nome, ela vai adicionar palavras aleatórias para diferenciá-los, podendo deixar o endereço do seu site um pouco longo ou bagunçado.

A boa notícia é que é possível editar esse endereço gerado pela Vercel! Para isso, após a publicação do seu site, logo ao lado, você verá a opção Add Domain. Clique nela para ir para a página de edição da URL.

Corrigindo a URL

Em Domains, clique no botão Edit ao lado da URL da sua página. No formulário que aparece, no campo Domain, edite a URL como desejar, mantendo o final como vercel.app, e clique em Save. Prontinho, o endereço do seu site já está atualizado e agora é só compartilhar com o mundo a sua criação!


Conclusão

A Vercel é uma plataforma muito prática e rápida para publicar seus projetos front-end. Depois de criar a conta, seus projetos recentes estarão sempre disponíveis na lista de repositórios para que você possa publicá-los. Como foi possível ver, a página fica prontamente disponível após o processo de deploy, o que nem sempre acontece quando utilizamos o Github Pages, que pode demorar de segundos até alguns minutos para colocar sua página no ar.

Uma outra vantagem da Vercel é que ela automaticamente vincula a sua página publicada com o seu repositório, inserindo o link da sua página no About do seu projeto:

Repositório do projeto no Github

Além disso, é uma ferramenta super prática e com possibilidade de configurações customizadas para projetos mais avançados utilizando React, Vue, Angular, Next, entre outros frameworks que você com certeza vai aprender no futuro ou já utiliza no seu dia-a-dia!

Espero ter ajudado a conhecer um pouco sobre essa ferramenta incrível. Um xêro pra vocês!


Nota: Caso queira saber como fazer diretamente no Github, recomendo esse artigo da Alura, que vai te dar todas as orientações!

Como colocar seu projeto no ar com o Github Pages? | Alura

Neste artigo,mostrarei como colocar o seu projeto no ar com o Github Pages. Você também vai entender o que é hospedagem e receberá dicas incríveis sobre o Github.

favicon alura.com.br

Top comments (4)

Collapse
 
vitoriazzp profile image
Vitória Zoche

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

Collapse
 
sucodelarangela profile image
Angela Caldas

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 ^^

Collapse
 
aclaracastro profile image
Ana Clara Castro

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 ;((

Collapse
 
sucodelarangela profile image
Angela Caldas

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