Neste artigo, vamos explorar o processo de hospedagem de um site React no Vercel, utilizando o GitHub para versionamento de código.
O que é o GitHub desktop?
O GitHub Desktop é uma ferramenta que permite interagir com repositórios GitHub de forma mais amigável, dispensando o uso extensivo de comandos no terminal.
Como enviar seu projeto react com GitHub desktop?
Ao utilizar o GitHub Desktop, é possível enviar um projeto React para um repositório GitHub de forma simplificada, sem a necessidade de criar o repositório manualmente ou cloná-lo via terminal.
Criação do repositório no GitHub:
Para hospedar um site, é fundamental que ele esteja em um repositório GitHub. A criação do repositório pode ser feita manualmente no site do GitHub ou através do GitHub Desktop. Aqui estão os passos para criar um repositório pelo site do GitHub:
- Acesse github.com e faça login
- Clique no ícone ‘+’ no canto superior direito
- Selecione ‘New repository’
- Escolha um nome descritivo para seu repositório
- Escolha se ele será ‘Public’ ou ‘Private’
- Marque a opção ‘Add a README file’ se quiser uma documentação inicial
- Clique em ‘Create repository’
Hospedagem no vercel para projetos react:
O Vercel é uma plataforma excelente para hospedar sites estáticos e aplicações serverless, sendo perfeitamente adequada para projetos em React. Além disso, possui integração nativa com o GitHub, tornando o processo de deploy extremamente simples. Veja como criar uma conta e fazer o deploy do projeto React no Vercel:
- Acesse vercel.com
- Clique em Sign Up
- Escolha login com GitHub
- Permita acesso aos seus repositórios públicos
- Preencha seus dados e confirme o cadastro
Como fazer o deploy do seu projeto react no Vercel:
Para fazer o deploy do seu projeto React no Vercel, siga os passos abaixo:
- Acesse a dashboard do Vercel e clique em ‘New Project’
- Selecione ‘Import Git Repository’ e escolha o repositório GitHub do seu projeto React
- Aguarde enquanto o Vercel detecta as configurações necessárias
- Defina a pasta onde seu projeto React reside e preencha os campos de build command e output directory
- Clique em ‘Deploy’ e aguarde o Vercel concluir o deploy automático
Recursos adicionais oferecidos pelo vercel:
Além do deploy automático, o Vercel disponibiliza recursos adicionais que podem ser úteis para o seu projeto:
- Custom domains: mapeie um domínio customizado para seu projeto
- Environment Variables: utilize variáveis de ambiente para configurações sensíveis
- Analytics: tenha acesso a um dashboard com métricas de acesso do seu site
- Redirects: configure redirecionamentos de URLs
Fluxo de trabalho simplificado e poderoso
O uso combinado do GitHub e Vercel proporciona um fluxo de trabalho simples e poderoso para prototipar ideias rapidamente:
- GitHub cuida do versionamento do código
- Vercel se encarrega do build, deploy e disponibilização do site React com um único comando
Conclusão
Agora que você dominou o processo de deploy de um projeto React no Vercel, está mais fácil colocar seus projetos online e compartilhar com outras pessoas. Continue explorando as possibilidades do React para criar aplicações web modernas e escaláveis.
