Streamlit + Stlite: Beyond Data Science Applications

Welcome to a journey that transcends the conventional boundaries of Streamlit and Stlite desktop! While these tools have gained fame in the data science realm, their capabilities extend far beyond.
This blog explores the untapped possibilities of Streamlit and Stlite as well as unveils how Streamlit can be leveraged in diverse domains to build captivating and user-friendly applications.

1. The Power of Streamlit: Streamlit has emerged as a go-to tool for rapidly building interactive data applications. Its simplicity and elegance lie in its Python-based framework, which allows developers to transform scripts into stunning and interactive visualizations effortlessly.
2. Introducing Stlite Desktop: Stlite Desktop allows developers to create standalone desktop applications with all the functionality and interactivity of Streamlit, without the need for a web browser. This means that users can enjoy the benefits of Streamlit applications directly on their desktops, regardless of their internet connection. A huge thanks and a shout-out to Yuichiro Tachibana (Tsuchiya) for developing this.
3. Forums & Resources:

• Streamlit forum where Stlite was announced.
• Git Repo — https://github.com/whitphx/stlite
• Stlite — Stlite playground
• Stlite Desktop Github
• YouTube tutorial by Fanilo Andrianasolo

Lastly, thanks to ‘pyodide-http’ Python library developed by Koenvo and team, we can now use libraries like ‘urllib3’ and ‘requests’.

Dependability/Requirements:

1. Your favourite IDE
2. Python ^3.10
3. Node.js and npm (installation link)
4. Streamlit

Enough talk — let’s now unleash your coding prowess with Streamlit and Stlite desktop! As we embark on this coding adventure, remember that the possibilities are limitless. So, let’s dive in!

Building Desktop Applications Using Streamlit and Stlite Desktop

Step 1: Directory structure

It’s essential that we follow a correct file structure so as to successfully build a desktop app using Stlite.

I first created a directory named ‘streamlit_stlite’; inside it, I created a folder named ‘streamlit_app’. Thereafter, I store my ‘streamlit_app.py’ inside this folder along with the other files such as the ‘requirement.txt’ and ‘pages’ folders, if it’s a multi-page app.

This is what it looks like:

File Structure

Step 2: Write your first Streamlit app

import streamlit

import pyodide_http # https://github.com/whitphx/stlite/blob/main/packages/desktop/README.md
pyodide_http.patch_all()
import requests

streamlit.title("Hello World!")

response = requests.request(url="https://streamlit.io/",method='GET')
streamlit.write(response.status_code)

In the above script, we have imported ‘streamlit’, ‘requests’ libraries along with ‘pyodide-http’ library, which you can install using the ‘pip install pyodide_http’ command.

Note: It’s important to write pyodide_http.patch_all(), before importing the ‘requests’ library.

If everything is successful, you will receive a status code ‘200’ and the interface will look like this:

Response code — 200

The widely-used URL access methods in Python, such asrequests, are not available in the Pyodide environment, and to tackle this issue we use the ‘pyodide-http’ library. This will be helpful when we add our app inside Pyodide. (You can read more about this here and here).

Step 3: To use npm, we will first create a ‘package.json’ file inside the ‘streamlit_stlite’ folder. This json file will look like this:

{
    "name": "streamlit_app_exe",
    "version": "0.1.0",
    "main": "./build/electron/main.js",
    "scripts": {
        "dump": "dump-stlite-desktop-artifacts",
        "serve": "NODE_ENV='production' electron .",
        "pack": "electron-builder --dir",
        "dist": "electron-builder",
        "postinstall": "electron-builder install-app-deps"
    },
    "build": {
        "files": [
            "build/**/*"
        ],
        "directories": {
            "buildResources": "assets"
        }
    },
    "devDependencies": {
        "@stlite/desktop": "0.31.0",
        "electron": "25.0.1",
        "electron-builder": "24.4.0"
    },
    "dependencies": {
        "pyodide": "^0.23.2"
    }
}

Note: Its important to keep the ‘@stlite/desktop’ version as “0.31.0”, if you do not do that, then chances are you will come across an error which says, ‘No Module Named ‘altair.vegalite.v#’ and the solution for this is described here.

Step 4: Now that we have package.json in place we can install npm in our project. We start by opening the command prompt and accessing the ‘streamlit_stlite’ directory. Then once we are inside the directory, use the npm install command.

npm installation complete

Step 5: Now use the command, npm run dump streamlit_app pyodide-http Here, ‘npm run dump’ will create a build folder. We add ‘streamlit_app’ inside this command as this is our directory name (present inside streamlit_stlite). Lastly, we add ‘pyodide-http’ to ask the npm, to fetch the said library.

We can use ‘requirements.txt’ as well, and this requirements file should be inside the root folder and not inside the‘streamlit_app’ folder. Also, if you want to use ‘requirements.txt’ then the command should look like this npm run dump -- -r requirements.txt

Step 6: Once you get a success message after running the above command, proceed further to the final step, that is, running this command: npm run dist. This command will add a ‘dist’ folder consisting of the executable file.

# all the npm commands

npm install
npm run dump streamlit_app pyodide-http # if you want to add a specific library
npm run dump streamlit_app -- -r requirements.txt # If you have requirement
npm run dist

After running npm run dist command, the final file structure should look like this:

Final structure

The executable: Once you navigate to the ‘dist’ folder, you will find an executable file. When you double-click this file, it will launch an Electron-powered application window. After the application loads specific packages and images, our app will become visible on the screen, giving us a reason to celebrate! 🥳🎉

Executable window

As we conclude this captivating journey, we realise that Streamlit and Stlite desktop are not limited to the confines of data science. The power to create immersive, interactive experiences is at your fingertips. So, dare to dream, push the limits, and unlock the boundless potential of Streamlit and Stlite desktop as they redefine the way we build applications across industries.

Happy Coding!!