Converting flask web app into a cross-platform desktop app

Image by Sara Torda

This is not a problem I thought I’d be running into any time soon, however, the nature of software development is such that unpredictable hurdles jump out at you at every stage of the development process.

I like to primarily describe myself as a web developer. The largest projects I’ve worked on in the past have all been web-based. There are several reasons for my preference in developing for the web. Firstly, the web is universal. Almost every device with a screen these days has a web browser built-in. Developing for the web allows me to reach as many devices and people as possible with my work. In addition to that, the web has a universal language, I can pick whatever stack I want and as long as I have some HTML, JS and CSS in the front-end, the browser will understand what I’m trying to say to it. The opposite is true for desktop applications (if you want to develop them natively, at least). As you’d need to work with different languages, frameworks, and codebases in order to develop for different systems. Desktop apps do have their advantages though. For one, if you are planning on building a stand-alone application, building a web app and deploying it to a server makes little sense, you’d be better off creating an app that can be packaged, installed, and run locally on a target machine.

This brings us to the topic of this article. Recently, I have been working on some personal software projects. Nothing I plan on sharing with the world as it’s software that I plan on using to improve my daily activities. However, even if the software was to be released, it has no real need to exist on the web, as it is fully functional when running locally. As I came to this realisation in the middle of development, I decided to change my approach from creating a web app to a desktop app. Being very far along the development process, it wasn’t very feasible to restart the entire project, so I set off looking for a way to convert my current app into a desktop app with the current codebase.

The project in question is built on flask, a python micro-framework for building small web-apps. You could build large apps with it but I would recommend a larger framework like Django for that purpose. Flask is very straight forward in the way it works. You can get set up with just a few lines of code as follows:

from flask import Flaskapp = Flask(__name__)@app.route("/")
def home():
return "Hello world!", 200
if __name__ == "__main__":
app.run()

The code above creates a flask app server that displays “Hello, world!” on the browser when you visit localhost at the specified port(usually 5000 by default). Simple and fast, but, this is a web app. In order to access this, you’d have to start the server, open the browser and then load its address. In order to turn this into a desktop application, I incorporated the use of the flask-desktop library. This library allows us to convert a flask application to a desktop one with a few lines of code.

from flask import Flask
from webui import WebUI
app = Flask(__name__)
ui = WebUI(app, debug=True)
@app.route("/")
def home():
return "Hello world!", 200
if __name__ == "__main__":
ui.run()

We have only added three lines of code here: importing the webui library, creating a ui object and passing it our app object, and finally replacing app.run with ui.run. That’s it! Really, that’s all there is to it. This app should be able to run on Mac, Windows, and Linux. You can even create a standalone executable using PyInstaller. The front-end of the application can still be developed using HTML templates, JavaScript and CSS.

If you’re interested in more content from me, visit my personal blog. If you are interested in acquiring my services, visit my personal website and feel free to contact me.

--

--

--

Full-stack software developer. #WebDev #Programming

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Reset history in git commits

How Adobe Experience Platform Pipeline Became the Cornerstone of In-Flight Processing for Adobe

mutating enum struct Swift | mobidevtalk, Learning through case study

WE BUILT TRANZAKT IN THREE DAYS

Creativity JS style

SKU Affinity Analysis via MS SQL Server

Binemon Development (3/10 Phase)

count(): Parameter must be an array or an object that implements Countable (View…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kelvin

Kelvin

Full-stack software developer. #WebDev #Programming

More from Medium

Build a full-stack website using Flask

flask logo

Deploying dockerized shiny apps on Heroku

Deploy A Web App using Flask and Docker containers

PY to JS [ 0 ] : Print  , Variable types and declaration ,