Como Fazer Deploy de Aplicação React com ViteJS no GitHub Pages – Passo a Passo Completo

Esboço do Artigo

1. Introdução
   • O que é o GitHub Pages?
   • Por que usar ViteJS para um projeto React?
2. Pré-requisitos
   • Git instalado
   • Conta no GitHub
   • Node.js e npm instalados
3. Criando um Projeto React com ViteJS
   • Como criar um projeto com o ViteJS
   • Estrutura básica do projeto
4. Configurando o ViteJS para Deploy no GitHub Pages
   • Modificando o arquivo vite.config.js
   • Ajustando o script no package.json
5. Criando o Repositório no GitHub
   • Iniciando o repositório localmente
   • Fazendo o push para o GitHub
6. Gerando a Build do Projeto
   • Comando para gerar os arquivos de produção
   • Verificando os arquivos gerados
7. Publicando no GitHub Pages
   • Instalando o pacote gh-pages
   • Configurando o deploy com o script no package.json
   • Executando o deploy
8. Testando a Aplicação
   • Acessando o link do GitHub Pages
   • Solução de problemas comuns
9. Atualizando o Projeto
   • Fazendo mudanças e atualizando o deploy
   • Boas práticas para deploy contínuo
10. Conclusão
    • Recapitulando os passos
    • Dicas finais para projetos futuros
11. FAQs
    • Como solucionar erros ao publicar no GitHub Pages?
    • Posso usar outro serviço além do GitHub Pages?
    • O que fazer se minha aplicação não renderizar corretamente?
    • Como configurar um domínio personalizado no GitHub Pages?
    • Quais são as limitações do GitHub Pages?

Como Fazer Deploy de Aplicação React com ViteJS no GitHub Pages – Passo a Passo Completo

1. Introdução

Se você já criou uma aplicação React com o ViteJS, o próximo passo é compartilhá-la com o mundo. O GitHub Pages é uma solução prática e gratuita para hospedar seus projetos front-end diretamente do seu repositório GitHub. Vamos aprender, passo a passo, como configurar seu projeto React com ViteJS para ser publicado no GitHub Pages.

2. Pré-requisitos

Antes de começar, certifique-se de que você tem os seguintes requisitos instalados e configurados no seu computador:

• Git: para gerenciar o código-fonte e fazer upload para o GitHub.
• Conta no GitHub: para armazenar o repositório da aplicação.
• Node.js e npm: para rodar a aplicação e instalar dependências.

Use os comandos abaixo para verificar se o Git e o Node.js estão instalados:

bashCopiar códigogit --version
node --version

3. Criando um Projeto React com ViteJS

Se você ainda não tem um projeto, crie um novo com o ViteJS:

1. Abra o terminal e execute:bashCopiar códigonpm create vite@latest minha-aplicacao-react --template react
2. Acesse o diretório criado:bashCopiar códigocd minha-aplicacao-react
3. Instale as dependências:bashCopiar códigonpm install
4. Teste o projeto localmente:bashCopiar códigonpm run dev

Agora você tem um projeto React básico criado com o ViteJS.

4. Configurando o ViteJS para Deploy no GitHub Pages

Para que a aplicação funcione corretamente no GitHub Pages, algumas configurações são necessárias.

1. Edite o arquivo vite.config.js:
   Adicione o campo base com o nome do repositório.javascriptCopiar códigoimport { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], base: '/nome-do-repositorio/', });
2. Ajuste o script de build no package.json:
   Garanta que o arquivo contém o script de deploy:jsonCopiar código"scripts": { "build": "vite build", "deploy": "gh-pages -d dist" }

5. Criando o Repositório no GitHub

1. Crie um novo repositório no GitHub.
   Certifique-se de copiar o link SSH ou HTTPS do repositório.
2. No terminal, inicialize o repositório localmente:bashCopiar códigogit init git remote add origin <URL_DO_REPOSITORIO> git branch -M main
3. Faça o primeiro commit e envie para o GitHub:bashCopiar códigogit add . git commit -m "Primeiro commit" git push -u origin main

6. Gerando a Build do Projeto

1. No terminal, execute o comando:bashCopiar códigonpm run build Isso criará a pasta dist contendo os arquivos otimizados para produção.
2. Verifique os arquivos gerados:
   • Abra a pasta dist para garantir que o conteúdo está correto.

7. Publicando no GitHub Pages

Agora vamos publicar o projeto:

1. Instale o pacote gh-pages:bashCopiar códigonpm install gh-pages --save-dev
2. Adicione o script de deploy:
   Certifique-se de que o package.json contém:jsonCopiar código"scripts": { "deploy": "gh-pages -d dist" }
3. Execute o deploy:bashCopiar códigonpm run deploy

8. Testando a Aplicação

1. Após o deploy, acesse o link gerado no formato:luaCopiar códigohttps://seu-usuario.github.io/nome-do-repositorio/
2. Caso a aplicação não funcione:
   • Verifique o campo base no vite.config.js.
   • Confirme se a pasta dist foi gerada corretamente.

9. Atualizando o Projeto

Quando precisar atualizar sua aplicação:

1. Faça as mudanças no código.
2. Gere a build novamente:bashCopiar códigonpm run build
3. Execute o deploy:bashCopiar códigonpm run deploy

Dessa forma, o GitHub Pages será atualizado automaticamente.

10. Conclusão

Fazer o deploy de uma aplicação React criada com ViteJS no GitHub Pages é uma tarefa simples quando seguimos as etapas corretamente. Agora você pode compartilhar sua aplicação com o mundo de maneira gratuita e eficiente!

FAQs

1. Como solucionar erros ao publicar no GitHub Pages?
   Verifique as configurações no vite.config.js e se os arquivos estão na pasta correta.
2. Posso usar outro serviço além do GitHub Pages?
   Sim, você pode usar plataformas como Netlify ou Vercel para deploy.
3. O que fazer se minha aplicação não renderizar corretamente?
   Confirme que o campo base está configurado corretamente no vite.config.js.
4. Como configurar um domínio personalizado no GitHub Pages?
   Crie um arquivo CNAME com o domínio desejado na raiz do repositório.
5. Quais são as limitações do GitHub Pages?
   Ele é ideal para projetos estáticos e não suporta backend.

Rafael Costa