React: Como fazer o Deploy no Github Pages

Você sabia que é possível hospedar gratuitamente os seus projetos React no Github Pages?

É uma solução sensacional tanto para hospedar projetos pessoais e profissionais, como para hospedar os repositórios do seu portfólio.

O processo é bem simples e exigem poucos passos.

📃 Pré-requisitos

Para que você possa acompanhar as explicações sem dificuldades, é recomendado que você já tenha alguma familiaridade com:

• React
• Git e Github
• Comandos do terminal

Se você já tem esses conhecimentos, então vamos em frente.

Utilizaremos o yarn como gerenciador de pacotes do projeto, mas você pode utilizar o npm no lugar se desejar.

📃 Passo a passo

1. Crie um projeto React (ou utilize um existente)

Se você já tem uma aplicação em React para hospedar, pode pular este passo.

Caso contrário, vamos criar um novo projeto utilizando o create-react-app:

$ yarn create react-app your-app-name

Lembre-se de substituir your-app-name pelo nome da sua aplicação:

2. Crie um repositório no Github e configure-o ao seu projeto.

Vá até o github.com e crie um novo repositório para hospedar esse projeto. Caso já tenha algum repositório para ele, você não precisa criar outro.

Agora, com o repositório criado, vamos adiciona-lo a pasta do seu projeto:

$ cd your-app-name
$ git init
$ git remote add origin git@github.yourgithubname/your-app-name.git

Lembre-se de substituir yourgithubname pelo seu nome do github e your-app-name pelo nome do repositório que você criou.

3. Instale o gh-pages como dependência de desenvolvimento no projeto

Vamos adicionar a biblioteca gh-pages no seu projeto. Ele irá automatizar o processo de deploy da nossa aplicação:

$ yarn add -D gh-pages

4. Adicione propriedades no package.json

Abra o arquivo package.json no seu projeto e adicione as seguintes configurações:

Lembre-se de substituir yourgithubname pelo seu nome do github e your-app-name pelo nome do repositório que você criou.

5. Configure o arquivo de rotas da aplicação

Se seu projeto não tem rotas na aplicação ou se ele não utiliza a biblioteca react-router-dom, você pode pular este passo.

Caso possua, para que a aplicação possa carregar todas as rotas corretamente, adicione no componente BrowserRouter a propriedade basename={process.env.PUBLIC_URL}:

6. Dê o comando de deploy

Agora, já estamos preparados para realizar o deploy da sua aplicação. Basta dar o comando:

$ yarn run deploy

7. Acesse a sua aplicação

Após o processo de deploy ser concluído, a sua aplicação já estará no ar.

Agora basta acessar https://yourgithubname.github.io/your-app-name substituindo yourgithubname pelo seu nome do github e your-app-name pelo nome do repositório que você criou.

Simples, não?

Caso a sua aplicação não esteja no ar, aguarde alguns momentos e depois tente novamente. É normal demorar algum para que o link comece a funcionar.

💭 Entendendo o processo de deploy

O que fizemos, por detrás dos panos, foi realizar o build da nossa aplicação e o push deste build para um repositório remoto do github em um branch chamado gh-pages.

O github já é pré-configurado para entender que o conteúdo do branch gh-pages será o conteúdo da página web do repositório.

🏆 Conclusão

Espero que tenha gostado e aprendido com esse artigo.

Deixe nos comentários se conseguiu realizar com sucesso o deploy da sua página no Github Pages.

Caso tenha tido algum problema, deixe um comentário para que eu possa lhe ajudar.

Se quiser acompanhar meu trabalho ou receber novas publicações, me adicione nas redes:

Linkedin: https://www.linkedin.com/in/rodrilima

Github: https://github.com/rodrilima

Até a próxima.