Create Desktop Application Using Flask Framework

Fareed Khan
4 min readAug 30, 2022

--

Which audience this blog is targeting?

  1. People who don’t like Tkinter
  2. People who are more comfortable with Flask.
  3. They already know how to use flask for desktop applications but having some issues to make an exe file of their application.

I am going to show you how a little change in your Flask code can give you a desktop application that can be run on other machines without Python.

Step 1

You need to install Python flaskwebgui library on your machine using the command:

pip install flaskwebgui

This library will help us to convert our flask web app into a desktop application.

Step 2

Go to your flask app folder, for this tutorial I have created a very basic flask application that contains all the directories that we normally create when we are using Flask, this is the directory of my flask app

Data of each file are shown below:

This simple app contains a single page with a single property of CSS attach to it.

Step 3

Go to your .py file, which you use to start the flask app, in my case it is main.py, and insert three lines of code in that file, I will explain all the newly inserted lines one by one, but this is what my updated main.py file looks like:

The first newly inserted line

from flaskwebgui import FlaskUI

is used to import the library that we have installed in step 1, which will be converting our flask web app into a desktop app.

The second newly inserted line

ui = FlaskUI(app, width=500, height=500) 

is used to create a user interface of our desktop app by specifying the width and height of the desktop app window, here the app parameter is the same which you use to instantiate the Flask app, i.e., app = Flask(__name__)

The third newly inserted line

ui.run()

is used to run that web app as a desktop app.

You need to use ui.run() command instead of app.run() in order to run the flask app as a desktop application, But for debugging purposes you can use app.run()

When your project gets completed then you can switch to ui.run() to test it on the desktop and for compiling your app to a standalone version.

Now, when you run the updated .py file like you normally do with your flask app, it will open a browser window but as a desktop application, here is the desktop version of my flask app:

It is basically a browser but running as a desktop app.

Step 4

You need to include a few lines of JavaScript code in your index.html file if you are rendering templates in your flask app.

JavaScript code is:

This is what my index.html looks like after including the JavaScript code in it.

Flask Desktop app will stop working if it doesn’t get any request from a server, this is the reason why we have this JavaScript code in our index.html, in order to constantly run the Flask server until and unless that desktop application closed by the user.

Step 5

In order to make that flask desktop app in a standalone (exe) file, you need to install the pyinstaller library in your operating system using this command.

pip install pyinstaller

Once you are done, using the command prompt (CMD) go to your flask app directory and go to that folder where your .py file is located which you use to start your application. And run this command

pyinstaller -w -F --add-data "templates;templates" --add-data "static;static" your_file_name.py

-w is used to hide the command prompt which by default opens when you start your application after making it as executable.

add-data “source;destination”

add-data must be used to include all directories that are required for your apps.

  • source: path to single or multiple files, Tells PyInstaller where to find the file(s).
  • destination file or files: destination folder will contain your source files at run time. NOT the destination file name.

and then your_file_name.py contains the name of your .py file that runs your app.

Running the above command will hardly take 3 to 4 minutes depending on your app. Once it got completed, you can check that there are some new folders got created within your flask directory.

Within the dist folder, there exists a file named after your .py file, open it and you will see your flask desktop application running without Python or anything else.

If you still face some issues, do reach me via my Gmail ID or through Medium!

--

--