How to Install Dash on Ubuntu 21.04

Published on August 10, 2021•Updated on November 21, 2023

Introduction

Dash is a Python framework designed to create custom web analytic applications. It has a highly customizable user interface that makes it ideal for building data visualization applications. This article explains how to run a Dash-based web analytic application on an Ubuntu 21.04 server.

Prerequisites

Deploy a Vultr Ubuntu 21.04 VPS instance.
Login as root.
Update the Ubuntu server.

1. Install pip

Install the Python pip package manager.

# apt install python3-pip -y

2. Install Dash

Install the Dash core backend, Dash HTML components, Dash core components, and Plotly with pip.
```
 # pip install dash
```
Install the Dash front-end.
```
 # pip install dash-renderer
```

3. Create A Dash Application Project

Switch to the /root directory.
```
 # cd /root
```
Create a project folder.
```
 # mkdir Dash_App
```
Switch to the project folder.
```
 # cd Dash_App
```
Create a python file named dash_app.py.
```
 # nano dash_app.py
```

Copy and paste this sample code.

 import dash
 import dash_core_components as dcc
 import dash_html_components as html

 app = dash.Dash()

 colors = {
    'background': '#111111',
    'text': '#7FDBFF'
 }
 app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
     html.H1(
         children='This is a Sample Dash Application',
         style={
             'textAlign': 'center',
             'color': colors['text']
         }
     ),
     html.Div(children='Dash: A web application framework for Python.', style={
         'textAlign': 'center',
         'color': colors['text']
     }),
     dcc.Graph(
         id='Graph1',
         figure={
             'data': [
                 {'x': [1, 2, 3], 'y': [1, 2, 3], 'type': 'bar', 'name': 'Data1'},
                 {'x': [1, 2, 3], 'y': [3, 2, 1], 'type': 'bar', 'name': 'Data2'},
             ],
             'layout': {
                 'plot_bgcolor': colors['background'],
                 'paper_bgcolor': colors['background'],
                 'font': {
                     'color': colors['text']
                 }
             }
         }
     )
 ])

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

Debug is set to True so you don't have to refresh the server after each change.

Save and exit the file.

4. Select the HTTP Port

Option 1: Run Dash on the Default Port

The sample code contains this statement:

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

Because the port is not specified, the Dash application runs on the default port 8050.

Option 2: Run Dash on HTTP Port

To configure your web application for the standard HTTP port 80:

Edit dash_app.py:
```
 # nano dash_app.py
```

Look for this code:

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

Add port=80. It should look like this when complete:

 if __name__ == '__main__':
     app.run_server(host='0.0.0.0', debug=True, port=80)

Save and exit the file.

5. Run Dash in a tmux Session

When you run your Dash script on an ordinary SSH session, the process ends after you exit. The tmux terminal multiplexer allows you to run processes in the background.

To create a tmux session, run:
```
 # tmux new -s DashSession
```
You can change DashSession to any session name you prefer. Please see How to Install and use Tmux for more information.
In the new tmux session, run your Dash project.
```
 # python3 dash_app.py
```
To view your deployed web application, visit your server in a web browser. Replace the example IP shown with your server's IP address.

If you chose to use the Dash default port 8050, use:
```
 http://192.0.2.12:8050
```
If you chose to use the HTTP default port 80, use:
```
 http://192.0.2.12
```

To stop the Dash script, press Ctrl + C

More Information

To learn more about Dash, please visit the Dash documentation.