Um Guia Simples para Levar Seu Projeto Angular para o GitHub Pages
Tags: angular, github, deploy, githubpages
Published: 2023-09-29 18:04:45

_Como parte de nossa jornada como desenvolvedores, adquirimos valiosas lições com a comunidade. Neste artigo, compartilharei algumas dicas que poderiam ter me ajudado e que você precisa ter em mente ao implantar seu projeto Angular no GitHub Pages. Minha intenção é contribuir com o conhecimento coletivo e ajudar você a navegar por esse processo com sucesso._

**Por que usar o Github Pages ?**

O GitHub Pages oferece uma solução gratuita e poderosa para hospedar sua aplicação diretamente de seu repositório GitHub. Neste artigo, exploraremos como implantar facilmente seu projeto Angular para que ele esteja acessível a todos.

- Para começar é necessario ter feito uma configuração na aba "Pages" nas configurações do seu repositorio no github, selecione em "Source" a opção github actions.

![Configuração da Page de um repositorio no github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r0uitz86naa6aasl0mht.png)

- Crie um diretório chamado ".github/workflows" dentro do seu projeto e, dentro dele, adicione um arquivo chamado "static.yml". Em seguida, insira o seguinte código:

```
name: Deploy static content to Pages

on:
  
  push:
    branches: ["master"]

  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  deploy:    
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [16.x]        
    steps:
    - uses: actions/checkout@v3
    - uses: actions/configure-pages@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm run build --prod      
    - uses: actions/upload-pages-artifact@v2
      with:
          path: './dist/remnant2build'
    - name: Deploy to GitHub Pages
      id: deployment
      uses: actions/deploy-pages@v2
```

É importante verificar se o "node-version" especificado é compatível com o seu projeto e ajustar o "path" de compilação para que corresponda às necessidades específicas do seu projeto. Também ajustar o nome da Branch para que acontece o deploy automatico quando der o push na branch especificada.

- Configure a URL base para /project-name-github/ para o ambiente do github. Isso significa que todos os URLs relativos no seu aplicativo Angular serão resolvidos em relação a /project-name-github/ como a raiz. No seu ambiente de desenvolvimento pode deixar "./". 

![Codigo do head de um arquivo index.html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z4suqsyowqq8kfipcmey.png)

- Faça a mesma alteração no angular.json

![Codigo do arquivo angular.json, mostrando o baseHref de production](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jq3vcnl5kzu9dmq6yqqh.png)

- Após essas alterações realize o push e verifique o workflow na aba "action" no github do projeto.

![workflows no github do projeto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a30tuf841cw573g9vrpc.png)


- No ultimo step do workflow "Complete Job" deve conter a url do seu projeto angular rodando.

![Foto com dos steps do workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4m2llr8jn91ezulyyp8.png)

---

**Precaução:**

- Fique atento aos caminhos relativos no projeto, pois eles podem causar problemas no ambiente final.

![Codigo mostrando a alteração necessario no src de images ou importações de arquivos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6ice18hnivlezucivub.png)


Espero que este artigo tenha sido útil para você durante esse processo.