So, Python being among the most used Programming Language, by both professionals as well as hobbyist. From basic projects to large scale LLMs use Python
Something that always makes your project look professional is a GUI,but learning GUI especially if you never had past experience creating GUIs can be difficult.
So, I spent months working on PyUIBuilder, so it’s easier for Python Developers to develop Python GUIs easily.
I started by writing down the requirements.
- Should be accessible in both web and Desktop version.
- Should be able to export clean, readable, python Code for the framework/library.
- Users should be able easily switch between multiple GUI libraries, such as tkinter, customtk etc.
- It should support 3rd party widgets, like Calendar, Clock etc.
- It should support layout managers and have an inbuilt code-editor
These were some of my primary requirements.
Since I wanted it to be accessible on both web as well as on Desktop, I decided to go with Javascript and use React library to speed things up.
Months spent…
For the first month, I only worked on a prototype, built the overall workspace, my first version didn’t include a code editor, Desktop app or templates. I focused primarily on just building a small working demo, and shared my project on Reddit. After a successfully sharing my project on Reddit, I gained interest of quite a number of python developers.
For the second month, I focused on fixing the layout manager for tkinter. If you have worked with tkinter you’d know it’s a bit different from the rest of the frameworks/libraries, you’ve worked with, especially pack manager. This one really took me a long time to figure out. You can refer this great video on Tkinter Layout manager
The next few months, I spent on fixing bugs and adding more features to the web app, until this point there was no Desktop app.
On the web version you had to export code every time and run in manually to see your GUI in action, but a live preview would eliminate such requirement and help debug faster
The Desktop App
Now Desktop app was necessary as you can’t really run python on the webbrowser unless you load some big library which would eventually slow down the load time.
So, my obvious choice was to go with Electronjs as it has a large community around it and I didn’t have to rewrite the entire thing from scratch. I added a live preview feature, so users can easily preview it without having to manually export code and test it.
Building and compiling for different OS
Now, I work on a linux laptop, so I don’t have windows or MacOs for that matter. To make it work for different OS, you generally have to compile it on that specific OS. Suppose you intend to release for Mac, you need to complie on a Mac machine.
Github Actions
Now since I didn’t have windows or a Mac machine, I came across Github Actions. Now this is a life saver especially if you want to release production builds.
All I had to do was to add a yml file .github/workflows folder and Github would use cloud machines to complie the build files for different OS based on specifications on your .yml file.
My Yml file looks something like this
name: Build Electron App
on:
push:
tags:
- 'v*'
branches:
- main
jobs:
build:
strategy:
matrix:
include:
- os: ubuntu-latest
platform: linux
- os: windows-latest
platform: win
- os: macos-13
platform: mac
arch: x64
- os: macos-latest
platform: mac
arch: arm64
runs-on: ${{ matrix.os }}
steps:
- name: Checkout repo
uses: actions/checkout@v3
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: 20
cache: 'npm'
- name: Install dependencies
run: npm install
- name: Create .env-cmdrc.json
run: |
echo '{
"production": {
"PUBLIC_URL": "./",
"REACT_APP_ANALYTICS_SCRIPT_ID": "${{ secrets.REACT_APP_ANALYTICS_SCRIPT_ID }}",
"API_ENDPOINT": "${{ secrets.API_ENDPOINT }}",
"GOOGLE_CLIENT_ID": "${{ secrets.GOOGLE_CLIENT_ID }}",
"GOOGLE_ELECTRON_CLIENT_ID": "${{ secrets.GOOGLE_ELECTRON_CLIENT_ID }}",
"GOOGLE_ELECTRON_CLIENT_SECRET": "${{ secrets.GOOGLE_ELECTRON_CLIENT_SECRET }}"
}
}' > .env-cmdrc.json
- name: Package Electron app
run: |
npm run build:electron-combine
npx electron-builder build --publish=never --${{ matrix.platform }} --${{ matrix.arch || 'x64' }}
- name: Upload dist artifacts
uses: actions/upload-artifact@v4
with:
name: ${{ matrix.os }}-${{ matrix.arch || 'x64' }}-artifacts
path: dist/
- name: Publish release
if: startsWith(github.ref, 'refs/tags/')
uses: softprops/action-gh-release@v1
with:
files: dist/**
Ofc, you, might have to change the above code a bit depending on your needs.
And voila! I was able to complie for all 3 OS without having to spend on an expensive machines.
Code Signing hassle
Now every desktop app has to be code signed, especially for Mac OS and Windows, otherwise you’d be hit with a firewall popup saying “unverified publisher, move to bin”.
The problem with code signing is that it’s pretty expensive especially if you are a solo developer. There isn’t really cheap option when it comes to code signing.
While people can still ignore the warning and continue to use your app, many people would just stay away from downloading it, because of the popup.
So, since I couldn’t afford to code sign my app, I made it clear to the users saying that my desktop app are not code signed, so people are aware and can trust my app
This might be a small thing to add to a website, but goes a long way in gaining the trust of the users.
Here’s a video demo of the entire app
This was my first Desktop I released to public, there’s still a long way to go and more work to do, but I am so happy I got my first app out in public.
Would love to hear what you guys think :)
Github: https://github.com/PaulleDemon/PyUIBuilder
About: https://about.pyuibuilder.com
Web version: https://pyuibuilder.com
Top comments (0)