Deploy de aplicação React no GitHub Pages com gh-pages

Um guia passo a passo para fazer o deploy de uma aplicação React no GitHub Pages usando a biblioteca gh-pages.

O GitHub Pages é uma ótima ferramenta para hospedar sites estáticos diretamente de um repositório GitHub. Se você tem uma aplicação React e quer disponibilizá-la online rapidamente, usar o gh-pages é uma maneira fácil e eficaz de fazer isso. Neste artigo, vamos guiá-lo pelo processo de deploy da sua aplicação React no GitHub Pages.

Passo 1: Preparando seu Projeto React

Antes de tudo, você precisa ter uma aplicação React criada. Se você ainda não tem, pode criar uma nova utilizando o Create React App. Execute o seguinte comando no terminal:

npx create-react-app meu-app

Se você já tem um projeto React, pode pular este passo.

Passo 2: Configurando o GitHub Pages

Instalando o gh-pages

O gh-pages é um pacote npm que facilita o deploy de projetos em GitHub Pages. Para instalá-lo, execute:

npm install gh-pages --save-dev

Atualizando o package.json

Agora, precisamos fazer algumas modificações no arquivo package.json do projeto. Adicione a URL do repositório GitHub na propriedade homepage e crie dois novos scripts: predeploy e deploy.

{
  "homepage": "https://seu-usuario.github.io/seu-repositorio",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
}

Seu package.json deve ficar assim:

{
  "name": "meu-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://seu-usuario.github.io/seu-repositorio",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "devDependencies": {
    "gh-pages": "^3.2.3"
  }
}

Substitua seu-usuario e seu-repositorio pelos valores corretos do seu repositório GitHub.

Passo 3: Publicando no GitHub

Criando um Repositório no GitHub

Se você ainda não tem um repositório no GitHub para sua aplicação, crie um novo:

1. Vá para GitHub e faça login.
2. Clique no botão New no canto superior direito para criar um novo repositório.
3. Dê um nome ao seu repositório e clique em Create repository.

Fazendo o Commit e Deploy

Depois de configurar o package.json, adicione, faça commit e push das suas alterações para o GitHub:

git add .
git commit -m "Configurações para deploy no GitHub Pages"
git push origin main

Para fazer o deploy da aplicação, execute:

npm run deploy

Passo 4: Configurando a Branch para o GitHub Pages

Depois de fazer o deploy, vá até a página de configurações do seu repositório no GitHub:

1. Acesse o repositório no GitHub.
2. Clique na aba Settings.
3. No menu lateral, clique em Pages.
4. Em Source, selecione gh-pages branch no dropdown e clique em Save.

Passo 5: Verificando a Publicação

Aguarde alguns minutos e sua aplicação estará disponível em https://seu-usuario.github.io/seu-repositorio. Você pode verificar acessando esse URL diretamente no navegador.

Parabéns! Você fez o deploy da sua aplicação React no GitHub Pages utilizando o gh-pages. Agora, qualquer alteração que você fizer e fizer o commit poderá ser facilmente publicada com o comando npm run deploy.

Para referência, você pode consultar os links de exemplo:

• Repositório no GitHub
• Aplicação publicada