Publicando suas aplicações Flutter no GitHub Pages

English version:

Publishing your Flutter apps into GitHub pages

Rodrigo Castro ・ Oct 4 '22

#programming #flutter #dart #tutorial

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

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.

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.

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.

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

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.
  

• Selecione a opção de criar o fluxo você mesmo set up a workflow yourself.
  

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

• 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.

• 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

• 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.

Pros e contras das abordagens

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
Netlify
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!