Learn to Code via Tutorials on Repl.it!

← Back to all posts
Make Cross Platform Desktop Apps with Flask
h
CoolCoderSJ (509)

CREATE YOUR FIRST CROSS PLATFORM DESKTOP APP IN UNDER 15 MINUTES [PYTHON OR HTML]

How pog

In today's times, most websites have a standalone application. There are many ways to create desktop apps, C++, Electron, etc.
However, this tutorial is for all of you python lovers.

Prior Knowledge Required -

  • Flask

This tutorial uses Flask. If you don't know flask, don't worry! This tutorial can easily be understood to handle HTML files too!

Packages required -

Make sure you download these PyPi shudder packages before hand -

  • PyQTWebEngine - pip3 install PyQTWebEngine
  • Flask - pip3 install flask
  • pyinstaller - pip3 install pyinstaller

Let's Begin!

This is best done locally, as pyinstaller automatically detects OS. If you run on replit, it will build for Ubuntu.

Use this python code in your main.py -

from flask import Flask
from PyQt5.QtCore import *
from PyQt5.QtWebEngineWidgets import *
from PyQt5.QtWidgets import QApplication
from threading import Timer
import sys
# ^^ Start using all the regular flask logic ^^

flask_app = Flask(__name__) # Initiate flask app

@flask_app.route("/") #Define what happens on the home page
def hello(): #Function can really be named anything
    return "Hello World"# Define function for QtWebEngine

def ui(location): #Initiate PyQT5 app
    qt_app = QApplication(sys.argv)
    web = QWebEngineView()
    web.setWindowTitle("Window Name") #Rename to change your window name.
    # ^ This cannot change between pages
    web.resize(900, 800) # Set a size
    web.setZoomFactor(1.5) # Enlarge your content to fit screen
    web.load(QUrl(location)) #Load Home page at startup
    web.show() #Show the window
    sys.exit(qt_app.exec_())

if __name__ == "__main__":
    # start sub-thread to open the browser.
    Timer(1,lambda: ui("http://127.0.0.1:5000/")).start() #Show the home page on startup. Change the URL backend (http://127.0.0.1:5000/cool_backend, etc)
    flask_app.run(debug = False)  #Start flask engine, debug is False so that your users see ` Internal Server Error ` instead of the actual error.
Run it!

Now when you run this, a window with your flask content comes!

Bundle with PyInstaller

Again, recommended to do this locally.

pip3 install pyinstaller

Open up your Command Prompt, Terminal, etc. And cd into your apps directory.


EXAMPLE -

App Directory - C:\a_user\myapp

Powershell, cmd, etc. Command to use -

PS C:\a_user> cd C:\a_user\myapp
PS C:\a_user\myapp>

Note: If your path has spaces, put it in quotes


Once you cd into your directory, run this command -

pyinstaller -n APP NAME main.py

BUT WAIT

Use these flags to enhance your app - (Put them between APP NAME and main.py)

FlagWhat it does
-cConsole Project only
-wWindow Project only
--add-data 'from;to-where'If your project has other files such as a static folder (Images, js, and cs), templates folder for html files, or other files.

ADD DATA EXAPMLE

Note, use ; for windows and : for Unix (mac, linux)

also note: . means root

WINDOWS

--add-data 'templates;templates' --add-data 'README.md;.'

LINUX AND MAC

--add-data 'templates:templates' --add-data 'README.md:.'

Run it!

(WINDOWS INSTRUCTIONS)

Now, you should see a folder called dist. Open it- there should be one folder, named YOUR APP NAME. Open that. Finally launch the exe, and voila! You can use this to generate an installer for your app.

Comments
hotnewtop
alanchen12 (28)

ok but can you atttach a repl lol

CoolCoderSJ (509)

@alanchen12 why...?

also if u like it pls upvote...

CoolCoderSJ (509)

@OldWizard209 ok...

just tryna break the cookie stereotype