Como publicar uma aplicação Angular no Firebase usando Github Actions
Tags: angular, github, firebase, devops
Published: 2022-08-21 23:01:00

O objetivo desse post é publicar uma aplicação Angular dentro de um projeto do Firebase utilizando o produto Hosting do Firebase. Para fazer automatizar a publicação configuraremos um script do  Github Actions para ser executado sempre que houver um commit na branch `main` do repositório.

Para acompanhar os passos desse post, será necessário que você tenha:

1. Conta do Firebase
2. Conta do Google
3. Firebase CLI instalado, veja como [aqui](https://firebase.google.com/docs/cli#install_the_firebase_cli)
4. Conta do Github
5. Conhecimento para criar e trabalhar com um repositório no Github

## Projeto no Firebase

Acesse o console do Firebase em `console.firebase.google.com` e crie um novo projeto.

![Novo projeto no Firebase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5pyq14jz9a3u6doq4rwa.png)

No meu caso vou usar o nome `demoangulargithubactions`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mlvwj4uj8wzoc4v9lpqm.png)

E vou optar por não habilitar o Google Analytics, uma vez que é irrelevante para esse tutorial.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/db9lq88xfdxjexichj6n.png)

Aguarde alguns instantes até que o projeto seja criado.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9zyjv7oevupuwpplvle.png)

Assim que o projeto estiver disponível você terá a opção de utilizar alguns produtos, por hora deixe essa aba aberta e vamos para a próxima etapa. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4d3c2f1foqinvcw1mlc.png)
 
## Criar repositório no github e projeto Angular

Para esse tutorial vou criar um repositório novo chamado `demogithubactions` e um projeto angular novo usando `ng new angular-tour-of-heroes`, mas essa etapa é opcional. Se você já tem um projeto, continue com ele.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nizxm1qsemrvy8dzxj74.png)

Faça o clone do seu repositório localmente.  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7gymd5iayk0v16957ohr.png)

Crie o projeto angular

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0uch5y1k7qxi5wm73ank.png)

O projeto será criado dentro da pasta `angular-tour-of-heroes` como na imagem abaixo.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35spi1pzd10sq4k2lv3y.png)

No meu caso vou mover todo o código para a pasta raiz. Se você quiser organizar de outra forma, lembre-se que o script do Github Actions precisará de algumas alterações.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/em52izzeijx1kr81uobs.png)

## Configuração do Firebase

Pronto, agora que já temos o projeto Angular e o repositório prontos, vamos configurar o Firebase.

Se você ainda não fez, faça a instalação do Firebase CLI e o login na sua conta.

Depois, execute o comando `firebase init hosting` e escolha a opção `Usar um projeto existente` (talvez esteja em inglês: Use an existing project)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9czcl9dtjcjswehzygk6.png)

Será mostrado a lista de projetos da sua conta, escolha o projeto que você quer fazer o deploy.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48uyhq6cxqsqpz6arxi0.png)

A partir de agora, serão feitas algumas perguntas, vamos lá:

- Escolha a pasta que será publicada, essa é a mesma pasta onde o comando `ng build` gera os arquivos de publicação, no nosso caso será a pasta `dist`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htaktppwkm097jed9pb6.png)

- Em seguida perguntam se quer configurar sua página como single-page app, eu sempre opto por `N`, não sei qual a influência dessa opção no roteamente do angular, se alguém souber, me fala nos comentários, por favor.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69jtfolmmdsjqxjfz7e0.png)

- Aqui também marco que não, porque nosso script já vai fazer a conexão com o Github Actions.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pdt6pn60c6mipr1ixoyz.png)

Pronto, se as configurações foram criadas com sucesso, você terá uma mensagem similiar com a da imagem abaixo.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9imk4579rx3c5879jg4.png)

Faça commit de tudo.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ied182ttaz0uo660eur.png)

## Configurando o Github Actions

Para configurar o Github Actions vamos precisar primeiro de um token de autenticação do Firebase, gere esse token executando o comando `firebase login:ci`. Uma tela do browser deve abrir e você precisará se autenticar.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxo9fpc8ptmam9diu0aj.png)

Se tudo der certo um token será gerado, na imagem abaixo eu pintei a linha, mas é possível ver que é uma string, guarde esse token por enquanto, vamos colocá-lo em um Secret do repositório no Github.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwleoy0wprufmqd3vg16.png)

Acesse o seu repositório no Github, vá em Settings -> Secrets -> Actions e crie um `New repository secret`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wm60i8j5ccvu7sigco1e.png)

Coloque o nome de `FIREBASE_TOKEN` e no valor cole o token gerado na etapa anterior. Adicione o Secret.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gfmiok742davwmnwuquh.png)

Acesse a aba Actions, pesquise por Manual e clique em Configure na caixa do Manual workflow.
   
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2wyp1bu0ryqb7rlehhw.png)

A página que será aberta já vem com algum código, substitua tudo pelo código abaixo.

``` yaml
name: Deploy-To-Firebase

on: 
  push:
    branches: 
      - main
      
  workflow_dispatch:

jobs:
  build:

    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js 16.13
      uses: actions/setup-node@v1
      with:
        node-version: 16.13    
    - name: Install dependencies
      run: npm install
    - name: Build
      run: npm run build -- --prod
    - uses: w9jds/firebase-action@master
      with:
        args: deploy
      env:
        FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

```

Salve o arquivo clicando em Start Commit e faça o commit.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yuie9owue72nfrl21m2.png)

Clique em actions novamente e veja se já existe algum workflow sendo executado, se não tiver, vá em `Deploy-To-Firebase` e clique em `Run workflow`. 
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j21aukvhdfkhl2x79h3n.png)

Opcionalmente, abra o deploy e acompanhe a execução de cada etapa. Se tudo funcionou, você terá uma tela com todas as etapas verdes, como a imagem abaixo.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxg2isrl5mz57ucz1kki.png)

Volte na aba do Firebase `console.firebase.google.com` que você deixou aberta e atualize. Clique em `All products` e depois em `Hosting` e você verá uma tela similar à da próxima image. Com dois domínios disponíveis e o pacote que foi publicado.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8v7o56ix2m68isc1a41d.png)

Abra um dos domínios e você deve ver uma imagem como a abaixo. Se isso aconteceu com você, é porque precisamos de um ajuste de configuração.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fyhwl08hzambf30ax8sb.png)

Abaixo você pode ver o conteúdo do meu arquivo `angular.json`, na linha 23, a configuração `outputPath` está configurado para um diretório diferente do que foi informado na hora que configurei o firebase.

Aqui temos duas opções, alterar o arquivo `angular.json` e colocar `"outputPath": "dist"` ou alterar o arquivo firebase.json e colocar `"public": "dist/angular-tour-of-heroes"`. Eu preferi alterar o meu `angular.json`. Fique à vontade.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zz5xhmgdaq3y82b41t67.png)

Faça a correção e um novo commit. Você verá que foi gerado um novo build. Se tudo correu bem, um novo pacote foi entregue no seu projeto firebase, como na imagem abaixo. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14x8jy960x94i0r2emtn.png)

Observe que agora você tem dois pacotes e existe a opção de voltar para o pacote anterior clicando no botão no início da linha do deploy mais antigo.

Observe também que o número de arquivos do último deploy está zero. Isso acontece porque há uma certa demora para o Firebase atualizar esse número.

O mais importante é que se você acessar um dos dois domínios, deve ver o projeto publicado, como na imagem a seguir.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sklpnrxeyjll7zhw8a1z.png)

## Conclusão

Espero que esse passo a passo tenha ajudado a configurar um projeto do angular no firebase.

Aproveite e adicione uma etapa de [notificação no seu pipeline do Github Actions utilizando o Telegram](https://dev.to/felipemsfg/telegram-notification-with-github-actions-69m)