Publicando suas aplicações Flutter no GitHub Pages
Tags: programming, tutorial, flutter, dart
Published: 2022-10-04 06:53:31

English version: 
{% embed https://dev.to/rodrigocastro_o/publishing-your-flutter-apps-into-github-pages-1l61 %}

## A muito tempo atrás...

Em uma terra muito distante, quando Flutter web era algo experimental ainda, e eu já tinha visto algumas maneiras de publicar o meu aplicativo Flutter no GitHub pages.

Mas agora com o Flutter 3.3.3, Flutter web já estável há muito tempo, resolvi ver o que mudou. Vou aproveitar e documentar aqui o que aprendi.

## O que é esse tal de Github pages?

Essencialmente é uma maneira que o GitHub oferece para você divulgar o seu repositório, seja com uma página do seu código, seja uma landing page, documentação ou o que quer que seja. Em todo repositório é possível fazer isso, inclusive um repositório "secreto" que consiste em ter o nome `<sua_conta_do_github>.github.io`, e se voce criar uma GitHub page nesse repositório, ele será a sua página inicial e outros repositórios sempre serão `<sua_conta_do_github>.github.io/nome_de_outro_repo/`.

Eu lembro que era modinha a muito tempo atrás, quando os programadores tinham os seus blogs feitos em sites estáticos no GitHub usando um tal de framework Jekyll, era a sensação
do momento, eu lembro que eu até procurava plugins e temas bem legais para criar o meu blog bem bonito.

Agora (faz tempo já) é possível publicar seu aplicativo no GitHub pages, pra chamar de seu!

## Código

O código utilizado neste artigo estará disponibilizado neste link aqui: https://github.com/castrors/flutter_web


## Opção 1: Peanut

```
https://pub.dev/packages/peanut
```

é uma ferramenta que faz o build da aplicação e atualiza/cria a branch `gh-pages`.

No meu caso, eu tive que seguir esses seguintes passos:

- Instalar o peanut 
```dart
flutter pub global activate peanut
```
- Rodar o peanut com um parâmetro extra, pois o meu repositório estará disponibilizado em https://castrors.github.io/flutter_web/, ou seja é diferente do padrão que é `/`, por isso precisei passar o parâmetro base-href também.

```dart
flutter pub global run peanut --extra-args "--base-href=/flutter_web/"
```

- Ao finalizar ele mostra que a construção da branch gh-pages foi efetuada com sucesso, porém precisa sincronizar essa branch no git.

```git 
To push your gh-pages branch to github (without switching from your working branch), run:
  git push origin --set-upstream gh-pages
```

- É só executar esse comando, que a sua branch local será sincronizada com a remota e é só aguardar. Você pode ver que tem uma GitHub action rodando, chamada `pages build and deployment`. Ela é a responsável em pegar a branch selecionada, no caso gh-pages, e publicar como a página do seu repositório. 

> Se por algum motivo você não encontrar essa GitHub action, deve ser porque a GitHub page não foi configurada no seu repositório. Para resolver isso vá em seu repositório -> Settings -> Pages e selecione a branch a qual você quer construir a sua GitHub page. 
![Pagina de configuração do GitHub pages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j334evmpktm5vxhposx5.png)

- Sucesso! A aplicação Flutter web está publicada, confira neste link: https://castrors.github.io/flutter_web/#/


![Aplicação flutter web rodando, aplicativo contador inicial com a cor padrão, que é azul](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpgiqxuja80s9y499u9b.png)

![It's alive](https://i.gifer.com/7RWA.gif)

## Opção 2: GitHub actions

Nessa alternativa iremos criar um fluxo de trabalho que irá ter como o gatilho, toda vez que a branch `main` for atualizada, e então faça todos os passos necessários para publicarmos a GitHub page. 

Vamos lá, abra o seu repositório e siga esses passos

- Primeiro, clique na aba Actions, logo abaixo do nome do seu repositório e em seguida clique em `New workflow`.
![Menu de actions do GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhzfspkiq4fv9e23q2h1.png)

- Selecione a opção de criar o fluxo você mesmo `set up a workflow yourself`. 
![Menu de criação de uma action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ll2y8ywj0u50zy8pzqa1.png)

- Você verá essa tela aqui. Primeiro, na parte superior renomeie o nome do seu arquivo, caso queira. Eu mudarei para deploy_github_page.

![Tela de criação de uma GitHub action, em modo de edição](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xryli6lbggxdd7vqf2h.png)

- Em seguida apague todo o conteúdo do arquivo e substitua por esse código abaixo:

```
name: Flutter Web Deploy
on:
  push:
    branches:
      - main
jobs:
  build:    
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
      - uses: subosito/flutter-action@v2
      - run: flutter build web --release --base-href /flutter_web/
      - run: git config user.name github-actions
      - run: git config user.email github-actions@github.com
      - run: git --work-tree build/web add --all
      - run: git commit -m "Automatic deployment by github-actions"
      - run: git push origin HEAD:gh-pages --force

```

- Código alterado, estamos prontos para submeter as alterações, crie um commit ou PR diretamente pelo GitHub para salvar as alterações, no meu caso vou salvar diretamente na main.


![Menu de criar commit das alterações](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0dkkb3m192hrrufre5e4.png)

- Tudo está pronto? Sim, agora só precisamos fazer alguma alteração visual em nosso código para que possamos ver o fluxo de trabalho acontecendo

![Commit mostrando a alteração da cor do aplicativo de azul para verde](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7k32ry5j1h60zzrj56r.png)

![Tela mostrando os passos do GitHub action, todos executados com sucesso](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mt15w4xjm3npziy2xcw.png)

- Todos os passos do workflow foram satisfeitos e por fim ele atualiza nossa aplicação e que agora está com as cores predominantes de verde.


![Novamente a aplicação flutter rodando, mas desta vez com as cores predominantes em verde](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zpws7kvb6t6axflnxqsa.png)

## Pros e contras das abordagens

![Nazaré Tedesco pensando nas fórmulas matemáticas](https://i.gifer.com/3RFR.gif)

A peanut é a mais simples, pois só exige dois comandos e já está com a branch `gh-pages` atualizada. Porém é necessário fazer você mesmo esse comando, manualmente. E por sermos humanos provavelmente eventualmente esqueceremos de rodar esse comando e a nossa aplicação não será atualizada.

De outro modo, com o GitHub action tudo roda automaticamente, mas ele é muito mais demorado, e conforme sua aplicação for crescendo, como por exemplo geração de código, isso fará com que esse workflow demore ainda mais. Mas esse passo jamais será esquecido, pois toda vez que a sua branch main for atualizada ele criará um gatilho para rodar esse action mais uma vez. 

## Use esse conhecimento para ir além

GitHub pages provavelmente não é a única opção para publicar suas aplicações Flutter web, você pode testar esses outros serviços:

[Firebase Hosting](https://firebase.google.com/products/hosting)
[Netlify](https://www.netlify.com)
[Codemagic Static Pages](https://docs.codemagic.io/flutter-publishing/publishing-to-codemagic-static-pages/)

## Conclusão

Espero que eu consiga ajudar alguém com esse conteúdo, use os dois sabiamente, ou só um dos dois, depende do seu caso de uso. 

Até a próxima!

![Hagrid dando tchau!](https://i.gifer.com/6I9a.gif)