· github · 2 min read
Deploy de uma aplicação React no GitHub Pages
Utilizando o GitHub Pages, uma hospedagem gratuita, para hospedar nossos projetos escritos em React
Quando precisamos de uma hospedagem para nossos sites ou aplicações web corremos logo para os serviços de Cloud, como AWS, Google Cloud, Heroku, Digital Ocean, Umbler ou para os serviços de hospedagem como HostGator da vida. Mas e quando é uma aplicação React, que não precisa de uma infraestrutura desse tipo?
Podemos utilizar o GitHub Pages, uma alternativa gratuita e de fácil utilização para hospedar nosso app.
Se você não conhece o GitHub Pages, confere essa apresentação rápida sobre o assunto:
Pra utilizar o React com o GitHub Pages só é necessário ter um repositório, com o nome do nosso projeto, no GitHub e instalar um utilitário de linha de comando chamado gh-pages.
Utilizando o gh-pages para subir a aplicação React em produção
Levando em consideração que já tenhamos um projeto React com o package.json e webpack configurado, bastaria somente instalar o gh-pages e configurar nosso build.
Para instalar o gh-pages, devemos executar:
npm install --save-dev gh-pages
No nosso package.json precisaremos de duas novas entradas na chave de scripts do NPM:
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
O predeploy vai ser rodado automaticamente antes do deploy pelo utilitário gh-pages. Porém, para que isso funcione, é necessário que exista uma task chamada build, que compila o nosso projeto React. Pode ser outro nome, como você já deve ter definido no seu projeto, então seria só mudar o npm run para o nome que você colocou. O dist, na tarefa de deploy, deve ser o nome do diretório que você configurou como destino do build no webpack.
Não é necessário criar a branch gh-pages no GitHub, pois o utilitário fará isso por nós.
Como exemplo, criei um projeto simples para que o código possa ser analisado aqui: React GH-Pages.
E podemos ver o React em produção, no GitHub Pages, aqui: woliveiras/react-gh-pages.