Python Desktop Starter using Flowbite, Flask, and Jinja

Start delivering small, slick, cross-platform desktop application with this starter repo utilizing python's Flask and the jinja-flowbite Jinja package.

Use the Discussion section for questions, suggestions and issues.

Table of Contents

• 1. Overview
• 2. Setup Development Environment
  • 2.1. Toolchain
  • 2.2. VSCode Extensions
  • 2.3. Install the Python Library Dependencies
  • 2.4. Install Nodejs Dependencies
• 3. Development
  • 3.1. Desktop Development
• 4. Distribution (Local)

1. Overview

The desktop application consists of a server-side, python webapp displayed in a native WebView control and distributed as a single, standalone executable

The tech stack is intentionally simple and approachable such that any intermediate software engineer should be able to pickup, experiment, and go quickly.

Tech Stack:

• The Interactive SSR WebApp:
  • html + tailwindcss form the foundations of the web page
  • flowbite component library using tailwindcss and html attributes for simple interactivity
  • htmx sprinkles html attributes to add islands of interactivity to a page
  • flask + jinja to build and serve the web page via HTML templates
• The Desktop
  • pywebview for hosting the python webapp in a native desktop window
  • pyinstaller for bundling the application into a standalone, single file exe

2. Setup Development Environment

2.1. Toolchain

• Install python 3.11 or newer
• Install Nodejs LTS (currently v20.9.0)
• Visual Studio Code

2.2. VSCode Extensions

• Pylance: ms-python.vscode-pylance
• Tailwind CSS Intellisense: bradlc.vscode-tailwindcss
• Jinja: wholroyd.jinja
• Jinja2 Snippet Kit: wyattferguson.jinja2-snippet-kit
• BetterJinja: samuelcolvin.jinjahtml
• Markdown All in One: yzhang.markdown-all-in-one
• markdownlint: davidanson.vscode-markdownlint

2.3. Install the Python Library Dependencies

python -m venv venv
.\venv\Scripts\activate # windows
source ./venv/bin/activate # linux
pip install -r requirements.txt

Use the Discussion section for questions, suggestions and issues.

2.4. Install Nodejs Dependencies

This is Flowbite and Tailwind CSS minification.

npm install

Use the Discussion section for questions, suggestions and issues.

3. Development

Development consists of two parallel command-line tools running simultaneously.

1. tailwindcss minification

   npm run watchcss

2. flask web server

   .\venv\Scripts\activate
   npm run webdev

With the above vscode extensions installed, one may set breakpoints and run via the vscode debugger by pressing the F5 key.

3.1. Desktop Development

.\venv\Scripts\activate
npm run desktop

Use the Discussion section for questions, suggestions and issues.

4. Distribution (Local)

WARNING. Distributable executables should be created by a CICD pipeline.

1. If needed, update the version found in build.ps1 or build.sh file

2. From a terminal run the following command to build the single file, standalone exe:

   .\venv\Scripts\activate # only run if the venv is not active
   npm run dist            # for windows, use `distnix` for linux and osx

   • The /dist directory contains the build .exe
   • The desktop.spec file may be tailored to your application's needs.

Use the Discussion section for questions, suggestions and issues.