Add a web UI with Dash (basic)

Audience: Users who want to add a web UI with Dash by Plotly.

Prereqs: Basic python knowledge.


What is Dash?

Dash is the original low-code framework for rapidly building data apps in Python, R, Julia, and F# (experimental).

Install Dash with:

pip install dash

Create the dash demo app

To explain how to use Dash with Lightning, let’s build a simple app with Dash.

In the next few sections we’ll build an app step-by-step. First create a file named app.py with the app content:

import lightning as L
import dash
import plotly.express as px

class LitDash(L.LightningWork):
    def run(self):
        dash_app = dash.Dash(__name__)
        X = [1, 2, 3, 4, 5, 6]
        Y = [2, 4, 8, 16, 32, 64]
        fig = px.line(x=X, y=Y)

        dash_app.layout = dash.html.Div(children=[
            dash.html.H1(children='⚡ Hello Dash + Lightning⚡'),
            dash.html.Div(children='The Dash framework running inside a ⚡ Lightning App'),
            dash.dcc.Graph(id='example-graph', figure=fig)
        ])

        dash_app.run_server(host=self.host, port=self.port)

class LitApp(L.LightningFlow):
    def __init__(self):
        super().__init__()
        self.lit_dash = LitDash(parallel=True)

    def run(self):
        self.lit_dash.run()

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

app = L.LightningApp(LitApp())

add ‘dash’ to a requirements.txt file:

echo "dash" >> requirements.txt

this is a best practice to make apps reproducible.


Run the app

Run the app locally to see it!

lightning run app app.py

Now run it on the cloud as well:

lightning run app app.py --cloud

Step-by-step walkthrough

In this section, we explain each part of this code in detail.


0. Define a Dash app

First, find the dash app you want to integrate. In this example, that app looks like:

import dash
import plotly.express as px

dash_app = dash.Dash(__name__)
X = [1, 2, 3, 4, 5, 6]
Y = [2, 4, 8, 16, 32, 64]
fig = px.line(x=X, y=Y)

dash_app.layout = dash.html.Div(children=[
    dash.html.H1(children='⚡ Hello Dash + Lightning⚡'),
    dash.html.Div(children='The Dash framework running inside a ⚡ Lightning App'),
    dash.dcc.Graph(id='example-graph', figure=fig)
])

dash_app.run_server(host='0.0.0.0', port=80)

This dash app plots a simple line curve along with some HTMlapp. Visit the Dash documentation for the full API.


1. Add Dash to a component

Add the dash app to the run method of a LightningWork component and run the server on that component’s host and port:

    import lightning as L
    import dash
    import plotly.express as px

    class LitDash(L.LightningWork):
        def run(self):
            dash_app = dash.Dash(__name__)
            X = [1, 2, 3, 4, 5, 6]
            Y = [2, 4, 8, 16, 32, 64]
            fig = px.line(x=X, y=Y)

            dash_app.layout = dash.html.Div(children=[
                dash.html.H1(children='⚡ Hello Dash + Lightning⚡'),
                dash.html.Div(children='The Dash framework running inside a ⚡ Lightning App'),
                dash.dcc.Graph(id='example-graph', figure=fig)
            ])

            dash_app.run_server(host=self.host, port=self.port)

    class LitApp(L.LightningFlow):
        def __init__(self):
            super().__init__()
            self.lit_dash = LitDash(parallel=True)

        def run(self):
            self.lit_dash.run()

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

    app = L.LightningApp(LitApp())

2. Route the UI in the root component

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

    import lightning as L
    import dash
    import plotly.express as px

    class LitDash(L.LightningWork):
        def run(self):
            dash_app = dash.Dash(__name__)
            X = [1, 2, 3, 4, 5, 6]
            Y = [2, 4, 8, 16, 32, 64]
            fig = px.line(x=X, y=Y)

            dash_app.layout = dash.html.Div(children=[
                dash.html.H1(children='⚡ Hello Dash + Lightning⚡'),
                dash.html.Div(children='The Dash framework running inside a ⚡ Lightning App'),
                dash.dcc.Graph(id='example-graph', figure=fig)
            ])

            dash_app.run_server(host=self.host, port=self.port)

    class LitApp(L.LightningFlow):
        def __init__(self):
            super().__init__()
            self.lit_dash = LitDash(parallel=True)

        def run(self):
            self.lit_dash.run()

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

    app = L.LightningApp(LitApp())

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.