Ctrl+K

Basics

Basics#

The most basic Dash app is a single file with a few lines of code. For example:

# import statements
import dash
from dash import html

# instantiate the app
app = dash.Dash()

# define the layout
app.layout = html.Div(
    children=[
        html.H1('This is the title!')
    ]
)

# run the app
if __name__ == '__main__':
    app.run_server(debug=True)

Running the app#

You could copy that code, save it to a file (I will call mine test_file.py), and then run that file in your python terminal/command prompt. If you see something like this, you are good to go:

Dash is running on http://127.0.0.1:8050/

 * Serving Flask app 'test_file'
 * Debug mode: on

If you open up the address — probably at http://127.0.0.1:8050/ — in your browser, you will see a simple dashboard with just a title that says “This is the title!”.

The details#

Now let’s discuss each of the parts of the code.

Importing packages

We obviously need to import the necessary tools, as we have done with other packages.

import dash
from dash import html

Instantiating the app

This line of code defines our dash app object. Subsequent references to app will modify and interact with this object.

app = dash.Dash()

Defining the layout

This next part is the meat of the code.

app.layout = html.Div(
    children=[
        html.H1('This is the title!')
    ]
)

Every title, chart, and button will at some point be incorporated into the app’s layout. The layout tells the program how to structure the web page. Everything will typically be stored in some type of a container — like an html.Div() — with the individual components/elements passed to the children parameter. In this example, we only have one element on the page: the title/header.

Running the app

if __name__ == '__main__':
    app.run_server(debug=True)

This code will be at the bottom of all our examples. It runs the server and allows us to interact with the dashboard in the browser. While these examples will always include the option debug=True, you will want to remove that option once you are ready to post your app to a website.

Closing the app#

To close the app, it is not enough to just close the tab in your browser. Even though the tab is closed, the server will still be running. To shut the local server down, go back to the terminal/command prompt and hit Control-c.

Contents