Flet, desktop and web app framework is really useful for Python developers. With only little modifications, your standalone desktop app can be hosted on a web server. In this post you can find how to self-host your Flet app on an Apache web server. This is not covered in the Flet official website.<\/p>\n\n\n\n
Flet is a Python framework to build desktop or web application without having knowledges of GUI or web frontend. Flet is developed based on Flutter mobile app framework developed by Google for the Dart language. You’ll find word “Flutter” when you writing codes and getting errors with Flet. I’m not going to provide more information around Flet or Flutter in this post.<\/p>\n\n\n\n
The goal is publish a Flet app on an Apache web server using TCP port based reverse proxy<\/strong>. In my case the web app is only accessible within the LAN. Should you have a publicly accessible Apache server (and admin privileges), you can publish your app to the public. The Flet official webpage Self Hosting<\/a> introduces the process to publish on an NGINX web server. You can do pretty much the same thing on an Apache web server by following this post.<\/p>\n\n\n\n As introduced in the official website<\/a>, you need to install GStreamer<\/a> to execute Flet app on a Linux server. Simply follow the steps<\/a> and install requirements.<\/p>\n\n\n\n I use Just for testing, let’s use a code posted on the official website. To check simple interaction, I copied Counter app<\/a> and saved as Quick explanation: At least following 4 modules are required to configure Apache as a reverse proxy. As Flet uses web socket, In this example, accessing flet.dev.peddals.com will open the Flet web app. In my environment, access to the subdomain uses always HTTPS as posted separately<\/a>. So, listening port is 443, and reverse proxy port is 8501 that the Flet app is listening to. Please edit these based on your environment.<\/p>\n\n\n\n Line 13-14 for Load Apache configuration (check syntax, load config, and check status).<\/p>\n\n\n\n Now, let’s execute Let’s follow the Flet official page<\/a> and write an auto-start configuration file. Below is an example in my server. Save this as Modifications:<\/p>\n\n\n\n Lastly, start and enable it as a service by following the official page<\/a>. The target of the symbolic link (#2) is the file created in the previous step.<\/p>\n\n\n\n That’s all. Access your app from a client PC and confirm the counter opens. When possible, reboot your server and confirm the service starts automatically.<\/p>\n\n\n\n In my environment, loading of the app kept forever initially. I finally figured out that the reverse proxy settings needed Date: Model: Size: Include in Image: Exclude from Image:<\/p>\n\n\n\n Seed: Steps: Guidance Scale: Scheduler: ML Compute Unit: Flet, desktop and web app framework is really useful for Python developers. With only little modifications, yo … <\/p>\nEnvironment<\/h2>\n\n\n\n
\n
High-level steps<\/h2>\n\n\n\n
\n
Detailed steps<\/h2>\n\n\n\n
Install requirements on Ubuntu server.<\/h3>\n\n\n\n
sudo apt-get update\nsudo apt-get install libgstreamer1.0-dev libgstreamer-plugins-base1.0-dev libgstreamer-plugins-bad1.0-dev gstreamer1.0-plugins-base gstreamer1.0-plugins-good gstreamer1.0-plugins-bad gstreamer1.0-plugins-ugly gstreamer1.0-libav gstreamer1.0-doc gstreamer1.0-tools gstreamer1.0-x gstreamer1.0-alsa gstreamer1.0-gl gstreamer1.0-gtk3 gstreamer1.0-qt5 gstreamer1.0-pulseaudio<\/code><\/pre><\/div>\n\n\n\nBuild a Python virtual environment and install Flet.<\/h3>\n\n\n\n
pipenv<\/code> as below. Use your preferred virtual env and install Flet. Flet supports Python 3.8 and above.<\/p>\n\n\n\npipenv --python 3.11\npipenv shell\npip install flet<\/code><\/pre><\/div>\n\n\n\nPrepare a Flet app code.<\/h3>\n\n\n\n
counter.py<\/code>. Change the last line as below.<\/p>\n\n\n\nft.app(target=main, view=None, port=8501)<\/code><\/pre><\/div>\n\n\n\nview=None<\/code> won’t open GUI or web browser window, and port=8501<\/code> sets the TCP port to listen to. As long as it does not conflict on your server, any port number works fine. By executing python3 counter.py<\/code>, you can see the app on web browser if installed on your web server by opening http:\/\/localhost:8501<\/code>. Next step is publishing to external access.<\/p>\n\n\n\nEnable Apache modules required for reverse proxy.<\/h3>\n\n\n\n
wstunnel<\/code> is also required. Following commands enable modules, load modules and check Apache status respectively.<\/p>\n\n\n\nsudo a2enmod proxy proxy_http proxy_wstunnel headers\nsudo systemctl restart apache2\nsudo systemctl status apache2<\/code><\/pre><\/div>\n\n\n\nWrite an Apache configuration file.<\/h3>\n\n\n\n
wss:\/\/<\/code> may not be required.<\/p>\n\n\n\n<VirtualHost *:443>\n\tServerName flet.dev.peddals.com\n\n\tSSLEngine on\n\tSSLCertificateFile \/etc\/letsencrypt\/live\/dev.peddals.com\/fullchain.pem\t\n\tSSLCertificateKeyFile \/etc\/letsencrypt\/live\/dev.peddals.com\/privkey.pem\n\n\tProxyRequests Off\n\tProxyPreserveHost On\n\n\tProxyPass \/ws ws:\/\/localhost:8501\/ws\n\tProxyPassReverse \/ws ws:\/\/localhost:8501\/ws\n\tProxyPass \/ws wss:\/\/localhost:8501\/ws\n\tProxyPassReverse \/ws wss:\/\/localhost:8501\/ws\n\tProxyPass \/ http:\/\/localhost:8501\/\n\tProxyPassReverse \/ http:\/\/localhost:8501\/\n\n\tErrorLog ${APACHE_LOG_DIR}\/flet.error.log\n\tCustomLog ${APACHE_LOG_DIR}\/flet.log combined\n\n<\/VirtualHost><\/code><\/pre><\/div>\n\n\n\nsudo apachectl configtest\nsudo systemctl reload apache2\nsudo systemctl status apache2<\/code><\/pre><\/div>\n\n\n\npython3 counter.py<\/code> and check if the web app opens from a client PC. If you removed the lines for wss:\/\/<\/code> and the app kept loading, add them, reload, and try again.<\/p>\n\n\n\nWrite an auto-start configuration file.<\/h3>\n\n\n\n
fletcounter.service<\/code>.<\/p>\n\n\n\n[Unit]\nDescription=Flet Counter Service\nAfter=network.target\n\n[Service]\nUser=handsome\nGroup=handsome\nWorkingDirectory=\/home\/handsome\/codes\/flet\nEnvironment="PATH=\/home\/handsome\/.local\/share\/virtualenvs\/flet-xuR7EMBP\/bin\/"\nExecStart=\/home\/handsome\/.local\/share\/virtualenvs\/flet-xuR7EMBP\/bin\/python3 \/home\/handsome\/codes\/flet\/counter.py\n\n[Install]\nWantedBy=multi-user.target<\/code><\/pre><\/div>\n\n\n\n\n
Description=<\/code> as you like<\/li>\n\n\n\nUser=<\/code> and Group=<\/code> your own username (whoami<\/code>)<\/li>\n\n\n\nWorkingDirectory= <\/code>is the full path to the directory of counter.py<\/code>. <\/li>\n\n\n\nEnvironment=\"PATH=<\/code> is the full path to the directory of python3 (output of which python3<\/code> up to bin\/<\/code>)<\/li>\n\n\n\nExecStart=<\/code> first arg is full path to Python3 (output of which python3<\/code>), and the second arg is the full path to the Flet app.<\/li>\n<\/ul>\n\n\n\ncd \/etc\/systemd\/system\nsudo ln -s \/home\/handsome\/codes\/flet\/fletcounter.service\nsudo systemctl start fletcounter\nsudo systemctl enable fletcounter\nsudo systemctl status fletcounter<\/code><\/pre><\/div>\n\n\n\nTrouble that I encountered.<\/h2>\n\n\n\n
wss<\/strong>:\/\/<\/code> as well as ws:\/\/ <\/code>(the NGINX config<\/a> on the official page does not have wss<\/strong>:\/\/<\/code> either). It took me some time to figure out that wss stood for Web Socket S<\/strong>ecured, just like https stood for http Secured. However, another Apache server doesn’t require wss — my SSD for the web server (Raspberry Pi) died after reverse proxy setup, and needed to build another. I’m still not sure why wss was required…<\/p>\n\n\n\nImage by Stable Diffusion<\/h2>\n\n\n\n
2023-Nov-25 23:02:10<\/p>\n\n\n\n
realisticVision-v20_split-einsum<\/p>\n\n\n\n
512 x 512<\/p>\n\n\n\n
cartoon, clolorful,
modern ladies working at post office classifying letters<\/p>\n\n\n\n
4084494267<\/p>\n\n\n\n
23<\/p>\n\n\n\n
11.0<\/p>\n\n\n\n
DPM-Solver++<\/p>\n\n\n\n
CPU & Neural Engine<\/p>\n","protected":false},"excerpt":{"rendered":"