Um Guia Simples para Levar Seu Projeto Angular para o GitHub Pages

Gabriel Laurencio — Fri, 29 Sep 2023 18:04:45 +0000

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.

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 "./".

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

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

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

Precaução:

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

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

DEV Community: Gabriel Laurencio

Um Guia Simples para Levar Seu Projeto Angular para o GitHub Pages