Add a web UI with Flask (basic)

Audience: Users who want to enable a flask app within a component.

Prereqs: Basic python knowledge.


What is Flask?

Flask is a web framework, that lets you develop web applications in Python easily.


Add Flask to a component

First, define your flask app as you normally would without Lightning:

from flask import Flask

flask_app = Flask(__name__)


@flask_app.route("/")
def hello():
    return "Hello, World!"


flask_app.run(host="0.0.0.0", port=80)

To enable the server inside the component, start the Flask server in the run method and use the self.host and self.port properties:

import lightning as L
from flask import Flask


class LitFlask(L.LightningWork):
    def run(self):
        flask_app = Flask(__name__)

        @flask_app.route("/")
        def hello():
            return "Hello, World!"

        flask_app.run(host=self.host, port=self.port)

Route the server in the root component

The final step, is to tell the Root component in which tab to render this component’s output: In this case, we render the LitFlask output in the home tab of the application.

import lightning as L
from flask import Flask


class LitFlask(L.LightningWork):
    def run(self):
        flask_app = Flask(__name__)

        @flask_app.route("/")
        def hello():
            return "Hello, World!"

        flask_app.run(host=self.host, port=self.port)


class Root(L.LightningFlow):
    def __init__(self):
        super().__init__()
        self.lit_flask = LitFlask(parallel=True)

    def run(self):
        self.lit_flask.run()

    def configure_layout(self):
        tab1 = {"name": "home", "content": self.lit_flask}
        return tab1


app = L.LightningApp(Root())

We use the parallel=True argument of LightningWork to run the server in the background while the rest of the Lightning App runs everything else.


Run the app

Start the app to see your new UI!

lightning run app app.py

To run the app on the cloud, use the --cloud argument.

lightning run app app.py --cloud

Examples

Here are a few example apps that expose a Flask server via a component: