Como colocar um projeto no ar com Vercel
Tags: braziliandevs, webdev, frontend, beginners
Published: 2023-05-16 23:37:47

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?](#o-que-é-a-vercel)
> [Colocando o projeto no ar](#colocando-o-projeto-no-ar)
> [Selecionando o projeto para deploy](#passo-2-selecionando-o-projeto-para-deploy)
> [Configurando o projeto](#passo-3-configurando-o-projeto)
> [Mudando a URL do seu site publicado](#mudando-a-url-do-seu-site-publicado)
> [Conclusão](#conclusão)_

---

### O que é a Vercel?

![Tela da Vercel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpv09vba1bbozxxwlae7.JPG)

Segundo o [próprio site](https://vercel.com/home), 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](https://nextjs.org/), podemos concluir que ela também é a ferramenta ideal para publicações de projetos com _frameworks_ ou bibliotecas front-end (como [React](https://react.dev/) ou [Vue](https://vuejs.org/), 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](https://github.com/), [Gitlab](https://about.gitlab.com/) ou [BitBucket](https://bitbucket.org/). 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 <mark>Create Your Vercel Account</mark>, selecione a opção **Hobby**, insira um nome de usuário no _input_ e clique em **Continue**;
- Em <mark>Let's connect yout Git provider</mark>, selecione o seu provedor Git na lista (no meu caso, foi o Github).

![Processo de sign up na Vercel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdt5njp780blraixqhqf.gif)

---

#### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7yvfp6ghfc38qo18xajt.gif)

Em <mark>Import Git Repository</mark> 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8bodizs3gxvk8b2gclu.gif)

---

#### Passo 3 - Configurando o projeto

Aqui é onde você configura o _deploy_ da sua página. Mas calma lá! Se você desenvolveu seu projeto com <abbr title="Hyper Text Markup Language">**HTML**</abbr>, <abbr title="Cascading Style Sheets">**CSS**</abbr> e <abbr title="JavaScript">**JS**</abbr>, não é necessário configurar absolutamente nada! Até mesmo se você desenvolveu utilizando algum framework ou biblioteca, como React, Vue ou [Angular](https://angular.io/), a **Vercel** automaticamente detecta qual tecnologia você utilizou e já deixa tudo pré-configurado.

Nessa nova tela, em <mark>Configure Project</mark>, 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._

<figure>
![Processo de deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fm4488bc2g972n5z4b18.gif)
<figcaption>A Vercel até comemora de tão fácil que é!</figcaption>
</figure>

---

### 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
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o5u0p54xbpiu5hl3bj3j.gif)

Em <mark>Domains</mark>, 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvoyteueojg4wlpnhos7.png)

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!_

{% embed https://www.alura.com.br/artigos/como-colocar-projeto-no-ar-com-github-pages %}