Projeto Angular no Github Pages

#GitHub
#Git
#Angular

Bom dia, boa tarde, boa noite/madrugada, devs. Tudo bem com vocês? Recentemente publiquei um tópico em Bootcamp Potência Tech iFood, e decidi deixar mais abrangente e republicar como artigo.

Vocês sabem como deixar seu projeto Angular ativo no Github Pages? Se não, vou tentar trazer algumas dicas que possam contribuir para, além de deixar seus códigos disponíveis, criar aquele link bonitinho do resultadp do seu projeto, para todo mundo ver o resultado. Isso é interessante, principalmente, para recrutadores que podem dar aquela olhadinha no seu Github e queira ver o resultado dos seus códigos e commits, sem precisar usar linhas de comando para isso.

Importante: para absorver melhor o conteúdo, é interessante saber como criar um repositório no Github. Para isso temos um curso bem bacana aqui na plataforma da DIO sobre git e github.

Para isso, eu vou utilizar um projeto Angular, onde eu vinha estudando e treinando sobre alguns conceitos de Angular.

Repositório no Github

Então, eu criei um repositório no Github, chamado “sports-blog”, e já tenho os meus arquivos “commitados”.

Agora, farei o deploy no github pages.

Deploy no Github pages

Para ativar o projeto ao Github pages é bem simples, como sabemos, é só seguir o caminho: settings > Pages > Branch: main > Select folder: root > Save

Após, aparecer a mensagem “Github Pages source saved”, o github fará o deploy, o que pode demorar de segundos a alguns minutos.

Após disponível, acessamos novamente em configurações: Settings > Pages, e vai aparecer o link com a opção “Visit site”.

O problema é que quando a gente acessa, ele mostra apenas o arquivo README.md na tela do browser.

Isso foi um problema que inclusive eu mesmo tive em um projeto, enquanto estudava Angular. Porém, descobri que dava para fazer isso da maneira correta.

Fazendo da forma mais manual possível

Para isso, vamos utilizar uns comandos via terminal, abrindo o terminal na pasta do projeto.

Primeiro comando que vamos rodar, é o ng build –configuration production. Pode ser que demore um pouco, pois esse comando vai criar uma pasta “dist” com alguns arquivos de configuração, e um index.html. Dentro dessa pasta dist, o ng build vai criar uma pasta com o nome do projeto contendo esses arquivos dentro dela.

Após isso, dentro pasta dist > sports-blog, vamos copiar o arquivo index.html e renomear para 404.html

Isso porque, nós estamos trabalhando com Angular, que trabalha com modelo SPA (Single Pages Application), ou seja tudo, todos os componentes, serão renderizados na mesma página. Se você utilizou rotas, por exemplo, no seu projeto, e for tentar acessar uma rota, um outro link, pode ser que ao tentar acessar um outro link, retorne um 404 “not found”. Perceba que a tag <base href=”/”> que não está apontando para nenhum caminho.

Configurando o package.json

Para evitar que isso aconteça também, é necessário fazer uma configuração crucial no arquivo package.json

Esse é o arquivo package.json, que é criado quando criamos um projeto em Angular através do nosso amigo ng. Então, ali no bloco do “scripts” vamos adicionar a seguinte configuração:

"deploy:ghdocs": "ng build --configuration production --output-path docs --base-href /sports-blog/"

Aqui cabe uma observação importante: após o base-href, temos que colocar o nome do repositório que foi criado no github, mesmo que o nome do projeto nos teus arquivos locais esteja diferente. Dessa forma o deploy-ghdocs vai apontar para o teu repositório criado no Github, onde vai conter os arquivos e pastas do projeto.

Utilizando o deploy:gh docs

Agora vamos usar um comando via npm que cria uma pasta chamada “docs” com os arquivos similares aos que foram criados na pasta dist.

npm run deploy:ghdocs

Após esse comando, se observamos no terminal, ele executou aquele mesmo "deploy:ghdocs": "ng build --configuration production --output-path docs --base-href /sports-blog/" que adicionamos no arquivo de configuração package.json

Além disso, se observarmos, ele também criou uma pasta “docs” com a mesma estrutura de arquivos da pasta dist.

Agora, dentro da pasta docs, vamos fazer a mesma coisa que fizemos na pasta dist, criar uma cópia do arquivo index.html, e renomear para 404.html. Além disso, dentro dos arquivos index.html e 404.html, devemos deixar o href da tag <base> apontando para a pasta principal do repositório, que é a própria pasta do projeto.

index.html

404.html

Salvando as alterações no Github

Feito isso, agora vamos efetuar o commit e push alterações realizadas para o repositório no github, de forma mais prática utilizando o próprio VSCODE.

Se verificamos no repositório, a pasta docs vai estar lá com todos os arquivos que criamos via comando npm, incluindo o index.html e o 404.html.

Configurando o Githubpages

Feito isso, vamos acessar novamente o Githubpages e alterar algumas configurações.

Na parte de “branch”, devemos deixar selecionado a branch “main”

E a pasta raiz não será mais o root, e sim a pasta docs.

Feitas as alterações, vamos clicar no Save para salvar. Para que as alterações sejam salvas por completo, pode demorar de segundos a minutos.

Com as configurações realizadas, agora podemos acessar o site normalmente.

E agora conseguimos acessar normalmente!

E você pode estar aí pensando: “Fazer isso todas as vezes pode ser algo muito massante..” e eu concordo. E para isso existe o angular-cli-ghpages. Com a ajuda do melhor amigo, o ng, ele vai fazer praticamente tudo o que fizemos aqui, quase que na mão, nem tanto assim, porém ainda muito mais fácil, com menos comandos, utilizando claro o gerenciador de pacotes npm.

Uma maneira mais fácil

Utilizando o angular-cli-pages

Abrindo o terminal novamente, lembrando de estar dentro da pasta do projeto, caso contrário nenhum comando irá funcionar.

Devemos executar o comando:

ng add angular-cli-ghpages

Esse comando vai adicionar a biblioteca do ghpages no projeto.

Vai aparecer uma pergunta, como consta na imagem abaixo, no terminal, digitamos Y para prosseguir e ele vai instalar alguns pacotes.

Quando terminar esse processo, devemos adicionar algumas configurações arquivo angular.json. Devemos procurar pelo bloco “deploy”, e dentro dele, após o builder, adicionar a configuração:

“options”: {“baseHref”:”/sports-blog/”}

Lembrando que no baseHref temos que passar o nome correto do repositório.

Depois disso, só rodar o comando no terminal:

ng deploy

Esse comando vai executar o build, e vai criar uma nova branch no repositório do Github, chamada Github pages. O próprio ng deploy já cria essa nova branch e commita os arquivos para essa branch “automagicamente”, lembrando que pode demorar um pouco.

E se a gente observar os arquivos lá dentro dessa nova branch:

A gente vê que dentro da branch ghpages, foram criados os mesmo arquivos, do jeito que foi criado a forma anterior. Agora, lá no github pages, devemos alterar a branch para ghpages.

Então, acessamos novamente: settings > pages

Alterar a branch de main para “ghpages”, e a pasta raiz não será mais a docs, e sim a root.

Salvando… é só aguardar agora para efetuar o deploy por completo.

Na parte de Environments, o github-pages pode ficar com o status pending por um tempo

Nesse caso, devemos aguardar até que fique “active”.

Estando “active”, agora podemos acessar novamente o site, e veremos que dessa forma também estará funcionando normalmente.

Conclusão

Você pode estar se perguntando, qual a maneira correta de colocar no Github pages um projeto Angular? Utilizando o ng build –configuration production, ou através do angular-cli-ghpages ?

Na verdade, ambas as formas irão funcionar, porém recomendo bastante que utilize o angular-cli-ghpages. Além de ser menos massante, funciona bem mais rápido, e cria uma branch nova apenas para dar o deploy do seu projeto, preservando a branch “original”, onde vai constar os arquivos do projeto, então permite fazer essa separado, apesar de tudo estar interligado.

Espero que vocês gostem desse material que vos trago aqui. Deixem aqui abaixo algum comentário, se gostaram ou não, se ficou grande demais, ou se passei alguma informação incorreta, por favor me corrijam. O feedback de vocês vai me ajudar a escrever matérias cada vez melhores.

Aqui abaixo, deixarei algumas referências que possa auxiliar e enriquecer esse artigo.