Knowledgebase

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 a Debian 10 server.

Prerequisites

• Deploy a Rcs Debian 10 VPS instance.
• Login as root.
• Update the Debian server.
• Update Python3 and pip to the latest version.

1. Install Dash and Tmux

1. Install the Dash core backend, Dash HTML components, Dash core components, and Plotly with pip.

    # pip install dash

2. Install the Dash front-end.

    # pip install dash-renderer

3. Install Tmux.

    # apt install tmux

2. Create A Dash Application Project

1. Switch to the /root directory.

    # cd /root

2. Create a project folder.

    # mkdir Dash_App

3. Switch to the project folder.

    # cd Dash_App

4. Create a python file named dash_app.py.

    # nano dash_app.py

5. 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.

6. Save and exit the file.

3. Select the HTTP Port

Option 1: Run Dash on the Default Port

1. 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.

2. Allow port 8050 on your firewall.

    # ufw allow 8050

Option 2: Run Dash on HTTP Port

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

1. Edit dash_app.py:

    # nano dash_app.py

2. 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)

3. Save and exit the file.

4. Allow HTTP port 80 on your firewall.

    # ufw allow 80

4. 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.

1. 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.

2. In the new tmux session, run your Dash project.

    # python3 dash_app.py

3. 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.