Guide for Flet app running on Github Pages

[rrendon502]

Is there a way that you could generate a guide to run a flet app running on a Github Page, I've tried several times with no success at all

[09u2h4n]

Yes it has, i tried the 0.19.0 version.
I created a github_page titled app with flet create github_pages then i built with flet build web github_pages -vv and i found web folder, i directly upload to my github page and it worked well but it took around ~30 seconds to load on mobile with pc it was ~1-2 seconds

I recommend build with flet build not with flet publish because

Static websites built with flet build, compared to flet publish, have faster load time as all Python dependencies are now packaged into a single archive instead of being pulled in runtime with micropip. flet build web also detects native Python packages built into Pyodide, such as bcrypt, html5lib, numpy and many others, and installs them from Pyodide package registry.

Some tips,

• You better change the url strategy to hash
• Some python library doesn't work because of pydoide
• Flet web app can render its UI with one of these renderers: (Copied from the docs)

1. HTML renderer - uses a combination of HTML elements, CSS, Canvas elements, and SVG elements. This renderer has a smaller download size.

2. CanvasKit renderer - this renderer is fully consistent with Flutter mobile and desktop, has faster performance with higher widget density, but adds about 2MB in download size.

3. By default, Flet uses CanvasKit renderer for both desktop and mobile browsers.

[thhung]

for example, in my static website, i don't use python at all. Is there a way to get rid of Pyodide?
2nd question: does python code is compiled to javascript or not at all?

[09u2h4n]

I think python code is implementing into pyodide instead of converting to javascript.
And also if you use flet you are already using python.

[UltronXx]

We need an article to the docs! :)

Can someone please and please provide a detailed description on how to host Flet 0.26 on GitHub pages?
I mean, a step by step. I don't seem to be getting anything right!

[ndonkoHenri]

Here is a video tutorial: https://youtu.be/qjHgRwQHD3s

[UltronXx]

Thank you Sir!
However, I watched your video during my endeavour.
I get it, but I don't get how to do it with the structure.

The ones I have seen were the old dir structure.
I hope you get me please

[rrendon502]

Thanks for the information El vie, 2 feb 2024 a las 11:02, Oğuzhan Yılmaz ***@***.***>) escribió:

…

Yes it has, i tried the 0.19.0 version. I created a github_page titled app with flet create github_pages then i built with flet build web github_pages -vv and in the dist directory i found web folder i directly upload to my github page <http://09u2h4n.github.io> and it worked well. — Reply to this email directly, view it on GitHub <#2499 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYOFLOKUYWYD6OPCAV4QX2DYRULZPAVCNFSM6AAAAABCNOKMASVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DGNBYHEYTK> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[rrendon502]

Wow! I just a rookie, cant get it right, El vie, 2 feb 2024 a las 18:33, Feodor Fitsner ***@***.***>) escribió:

…

Took 2.24 sec for me: image.png (view on web) <https://github.com/flet-dev/flet/assets/5041459/ceff3241-51a1-4ce6-9f5a-df003567f553> — Reply to this email directly, view it on GitHub <#2499 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYOFLOLRD57CXAFYPFIWGGTYRWAVLAVCNFSM6AAAAABCNOKMASVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DGNJRHEZDM> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[rrendon502]

Great! El lun, 5 feb 2024 a las 4:13, Oğuzhan Yılmaz ***@***.***>) escribió:

…

I am starting to write a article for this — Reply to this email directly, view it on GitHub <#2499 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYOFLOMXSUYQYNF42FT4EPDYSCWGPAVCNFSM6AAAAABCNOKMASVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DGNRYGIZDA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[alegro96]

I just wanted to try to publish a web app on GitHub pages to see if it works.

I build the web app with 'flet build web' and tested it with the python http server module. Everything worked just great. I pushed the build/web folder into my github repository (https://github.com/alegro96/Test-web-App) and published it with pages. If I visit my page there is just a blank page: https://alegro96.github.io/Test-web-App/

What I expect is this:

Do I miss any settings or did something wrong?

[liudonghua123]

You did not config the base_url, see also https://flet.dev/docs/cli/publish/ and https://github.com/flet-dev/flet-build-template/blob/main/%7B%7Bcookiecutter.out_dir%7D%7D/web/index.html#L18C31-L18C40.

I check the base of your index.html, it was the default /.

[alegro96]

This works. Thank you!