Feat: Deploy Flutter Web App to GitHub Pages

[nelsonic]

As noted in #316 (comment) and #315 (comment) 💬
deploying the Flutter Web App to Fly.io has proved to be a performance fail. 😕

As noted by @LuchoTurtle in #315 (comment)
it should be possible to get a 90+ PageSpeed (LightHouse) performance score for a Flutter Web App ... 💭
However I've not been able to replicate the results on the PageSpeed Insights site:
https://pagespeed.web.dev/report?url=https%3A%2F%2Fdit-tests.web.app
So that's something we need to understand first. 🔍
How do we ensure that the PageSpeed results are consistent?
Can we run the tests as a GitHub Action and save the results somewhere we can review them? 🤔

Todo

• Figure out how to deploy a Flutter Web App to GitHub Pages -> [PR] Deploy to Github pages. #323
• Configure Cloudflare so app.dwyl.com points to: https://dwyl.github.io/app

This looks like a decent starting point:

• https://flutterawesome.com/simple-way-to-deploy-a-flutter-web-application-on-github/
• https://brewyourtech.com/how-to-host-your-flutter-web-app-on-github-pages/

Why This Matters?

Why are we making such an effort on page load time instead of focussing on building our App? 🤷‍♂️
I don't see this as "not building the app"; DevOps is about delivering the App. 🍕
Rather I see this is as complying with the first point on our Manifesto. 📜
If we invest weeks of our Dev time in building features 🧑‍💻 ⏳
and then the App takes ages to load for people viewing it for the first time, 🐌
it gives them a terrible first impression. 😢

I'm very happy to pick this up myself. ⏳
But if anyone else wants to help, it's much appreciated. 🙏

[LuchoTurtle]

Should a different repo be created for this? Or should we create another workflow in this one?

[nelsonic]

@LuchoTurtle good question. 👌
Strong preference for using this repo and creating a new GitHub Actions Workflow
Typically the way we have done GitHub Pages deployment in other projects
is with a gh-pages branch that and a workflow to build the static content e.g:

• https://github.com/dwyl/book/tree/gh-pages
• https://github.com/dwyl/book/blob/main/.github/workflows/deploy.yml

Fairly certain you can use this action: https://github.com/JamesIves/github-pages-deploy-action (we're already using it)
to some of the boring bits. 💭

Please let me know if you want to pair on this. 👥 🧑‍💻
And if you want to spend a couple of hours on documenting what you learned, 🙏
please do so in: https://github.com/dwyl/learn-github-pages |> dwyl/learn-github-pages#2 📝

[nelsonic]

Capturing the BEFORE pictures for reference 📷
so that we can evaluate how much faster having the Flutter Web App 📱
is on GitHub Pages than on Fly.io 🏎️ vs. 🐌 ... 🤷‍♂️

Running Lighthouse in the Chrome Dev Tools is basically "Perfect Conditions":

A far more realistic test is running it online:
https://pagespeed.web.dev/report?url=https%3A%2F%2Fdwylapp.fly.dev

For reference the dwyl.com static site is hosted on GitHub Pages and currently gets a 93 perf score:
https://pagespeed.web.dev/report?url=https%3A%2F%2Fdwyl.com

This should be our lower bound. i.e. if we go lower than this for the app we need to rethink things.
Ideally we should spend as much time as needed to get it up to 100.
Yes, it may feel like an "arbitrary" goal, but if we achieve 100 for everything it means we aren't wasting people's time. 👌

[LuchoTurtle]

Will work on this 👍

Though I feel the need to point out that comparing a Flutter Web app with dwyl.com is not necessarily a fair comparison, as the latter was made with JS + Tachyons and we already know the shortcomings of using Flutter Web.

Though this doesn't mean we shouldn't strive to go for near-native performance on all fronts 👍

[LuchoTurtle]

I'm stumped on why Github Pages don't properly serve the built files from Flutter Web.

When I run python -m http.server locally, after running the exact same command from the workflow (flutter build web --release --web-renderer html), it shows the web app correctly..

[nelsonic]

@LuchoTurtle yes, the hand-crafted dwyl.com is significantly smaller
than even a "Hello World!" (counter) Flutter App ...
it's not meant to be comparison, just a reference.
GitHub Pages is already working well for us. ✅

But ... we need to do everything we can to get performance up to 100 on the Flutter Web App.
Even if we have to use "smoke and mirrors" ...
i.e. get creative with a "fake door" that only starts loading the Flutter App
after the page is fully interactive.

[nelsonic]

@LuchoTurtle it's a good sign that it works on localhost. 👌
The necessary files appear to be there on the gh-pages branch: https://github.com/dwyl/app/tree/gh-pages

The config for GitHub Pages appears to be correct.
https://github.com/dwyl/app/settings/pages

The fact that the index.html loads suggests that something is working. 🎉
Guessing you've done a bunch of googling ... 🔍
Please share links to what you've looked at. 🔗

[LuchoTurtle]

The _flutter undefined error seems to be people trying to serve the web folder instead of build/web.
I'm doing so with the github-pages-deploy-action in the folder param.

      - name: Deploy to Github Pages
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages # The branch the action should deploy to.
          folder: ./build/web # The folder the action should deploy.

And I'm sure the folder exists because it's shown in the workflow.

I've checked many links, including the ones below.

• https://www.reddit.com/r/flutterhelp/comments/xf4yyl/flutter_web_app_build_successfully_but_is_not/

• Uncaught ReferenceError: _flutter is not defined flutter/flutter#113512

• https://stackoverflow.com/questions/73815269/flutter-web-why-it-is-getting-404-error

• https://www.reddit.com/r/flutterhelp/comments/xzs8mk/comment/iro0hs1/?utm_source=share&utm_medium=web2x&context=3

But this seems like Github Pages is not serving the files correctly. Because flutter.js definitely exists in the workflow, so it shouldn't be undefined.

[nelsonic]

Could you try pushing everything to the branch
and then selecting ./build/web in the pages config: https://github.com/dwyl/app/settings/pages ?

[LuchoTurtle]

You can't do that in the page config

they only allow root or under docs.

The source branch can be any branch in your repository, and the source folder can either be the root of the repository (/) on the source branch or a /docs folder on the source branch.

[LuchoTurtle]

As per https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#static-site-generators, they use Jekyll to serve the files. Perhaps customizing this behaviour might be a solution.

[nelsonic]

A bit of Googling suggests a more targeted approach: https://github.com/bluefireteam/flutter-gh-pages 🤞

[nelsonic]

https://dwyl.github.io/app

Is this error worth investigating?

Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.

[LuchoTurtle]

A bit of Googling suggests a more targeted approach: bluefireteam/flutter-gh-pages 🤞

I guess I'll give this a whirl.

Is this error worth investigating?

Apparently not -> https://stackoverflow.com/questions/69619035/error-with-permissions-policy-header-unrecognized-feature-interest-cohort

[LuchoTurtle]

Tried using bluefireteam/flutter-gh-pages but it's still not working. The same error appears...

Uncaught ReferenceError: _flutter is not defined
    at (index):42:7

I'll revert the changes and try to use .nojekyll file.

[LuchoTurtle]

Maybe .nojekyll won't make a difference, as per https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/.

This should only be necessary if your site uses files or directories that start with underscores since Jekyll considers these to be special resources and does not copy them to the final site.

[nelsonic]

Hmm ... this is very peculiar.

[LuchoTurtle]

Fixed by https://stackoverflow.com/questions/74164386/flutter-web-shows-blank-page-on-github-deployment.

[LuchoTurtle]

Going to populate https://github.com/dwyl/learn-github-pages now.

[nelsonic]

Re-opening just to configure Cloudflare subdomain 👨‍💻 ⏳

[nelsonic]

loading ... https://dash.cloudflare.com/login?lang=en-US ⏳

[nelsonic]

https://github.com/dwyl/app/settings/pages

https://app.dwyl.com

Viewing the app at: https://app.dwyl.com/

@LuchoTurtle we're back to having the 404 on the logo and other files.
So looks like we need to update some config again. 🙏

[nelsonic]

https://app.dwyl.com is working thanks to #324 thanks for reviewing+merging @LuchoTurtle ✅

[nelsonic]

70 ... 📈 👌

https://pagespeed.web.dev/report?url=https%3A%2F%2Fapp.dwyl.com%2F

[nelsonic]

https://developers.cloudflare.com/pages/get-started/ 👀

[nelsonic]

Deployment worked without any issues: https://app-abz.pages.dev/#/

No improvement in perf:
https://pagespeed.web.dev/report?url=https%3A%2F%2Fapp-abz.pages.dev%2F

So I don't think it's worth pursuing this further (for now ...) 💭

[nelsonic]

Disabled the Cloudflare pages deployment integration:
https://github.com/organizations/dwyl/settings/installations/34861696