nelsonic commented 1 year ago

As noted in https://github.com/dwyl/app/issues/316#issuecomment-1439717058 and https://github.com/dwyl/app/issues/315#issuecomment-1450229246 💬 deploying the Flutter Web App to Fly.io has proved to be a performance fail. 😕

As noted by @LuchoTurtle in https://github.com/dwyl/app/issues/315#issuecomment-1442235354 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

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

This looks like a decent starting point:

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 commented 1 year ago

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

nelsonic commented 1 year ago

@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:

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 |> https://github.com/dwyl/learn-github-pages/issues/2 📝

nelsonic commented 1 year ago

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":

pagespeed-insights-dwylapp-fly io-80-chrome-dev-tools

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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.

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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.

LuchoTurtle commented 1 year ago

Tried switching to /docs:

And updated the workflow to place it there:

      - 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.
          target-folder: docs

But it yields the same page :/

nelsonic commented 1 year ago

Good catch. iThought it was more permissive than that. Ok. then you're already on the right (only viable) track. 👌

nelsonic commented 1 year ago

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

nelsonic commented 1 year ago

https://dwyl.github.io/app

Is this error worth investigating?

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

LuchoTurtle commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Hmm ... this is very peculiar.

LuchoTurtle commented 1 year ago

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

LuchoTurtle commented 1 year ago

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

nelsonic commented 1 year ago

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

nelsonic commented 1 year ago

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