Search⌘ K
AI Features
Home
Courses
Interactive Dashboards and Data Apps with Plotly and Dash

Creating and Running a Simple App

Explore how to create and run a basic Dash app by writing your app.py file, setting up the app layout with HTML components, and running the app with debugging enabled. This lesson helps you understand the core building blocks of a Dash app, including managing layout elements and using key HTML parameters to structure your app's interface.

We'll cover the following...

Let’s build our first simple app! We’ll start with the app.py file.

Steps to create and run the app

Create a file, name it app.py, and write the following code:

C++
import dash
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
    html.H1('Hello, World!')
])
if __name__ == '__main__':
    app.run_server(debug=True)
  • Lines 1–2: We import the required packages using their usual aliases.
  • Line 3: We instantiate the app.
  • Lines 4–6: We create the app’s layout. This app’s layout contains one element—the list passed to html.Div, which corresponds to its children parameter. This will produce an H1 element on the page.
  • Lines 7-8: We run the app. Note that we set debug=True in the app.run_server method. This activates several developer tools that are really useful while developing and debugging.

Running example

We’re now ready to run our first app. Go ahead and click the “Run” button. You should now see an output like the one shown in the illustration below, which indicates that the app is running:

Command-line output while running the app
Command-line output while running the app

A working example has been set up below:

import dash
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1('Hello, World!')
])


if __name__ == '__main__':
    app.run_server(host='0.0.0.0', debug=True, port=8050)
Running the simplest Dash application

Congratulations on ...