Deploy Dash App to a VPS web server - Data Visualization Applications with Dash and Python p.11

Hello and welcome to part 11 of the Data Visualization with Dash tutorial series. In this tutorial, I would like to illustrate how you can deploy your Dash application to a web server. While the Dash documents do give some instruction here, especially with deploying to heroku. That said, I like to have full control over my web servers, which also usually winds up being a much cheaper method as well.

For the purposes of this tutorial, I will be using Digital Ocean. For $10 in credit to start with them, youc an use my referral code, but you can use *any* VPS you want here. The whole purpose of going through these steps is so that you're free to customize with any host you want. If your app is not resource intensive, and you're just looking for a simple way to share it with people, Heroku may actually be the superior choice for you. If you think you want more customization options, more power, or are finding Heroku to be too costly, continue along!

At the core, we first need to do a traditional Flask setup. I already have a tutorial for setting up Flask with Python 3, so start with that.

From here, we just need to change a few things to make our Dash app work. You *could* just simply stop apache from running and hogging port 80, and then run your dev server on port 80, but this dev server is not hardened security-wise, nor will it scale to traffic well. Let's get the Dash libraries that we'll be using:

sudo pip3.6 install dash dash-renderer dash-html-components dash-core-components plotly

Now, let's take the following code from the first tutorial in this series, saving it to __init__.py:

cd /var/www/FlaskApp/FlaskApp nano __init__.py

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(children=[
    html.H1(children='Dash Tutorials'),
    dcc.Graph(
        id='example',
        figure={
            'data': [
                {'x': [1, 2, 3, 4, 5], 'y': [9, 6, 2, 1, 5], 'type': 'line', 'name': 'Boats'},
                {'x': [1, 2, 3, 4, 5], 'y': [8, 7, 2, 7, 3], 'type': 'bar', 'name': 'Cars'},
            ],
            'layout': {
                'title': 'Basic Dash Example'
            }
        }
    )
])

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

Notice that the only thing running the server is in the dunder bit at the end? Since it's WSGI that is actually running this app, this script wont be run as main. Thus, we need to add the following right above the if __name__ == '__main__': part: server = app.server

The full code now is instead:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(children=[
    html.H1(children='Dash Tutorials'),
    dcc.Graph(
        id='example',
        figure={
            'data': [
                {'x': [1, 2, 3, 4, 5], 'y': [9, 6, 2, 1, 5], 'type': 'line', 'name': 'Boats'},
                {'x': [1, 2, 3, 4, 5], 'y': [8, 7, 2, 7, 3], 'type': 'bar', 'name': 'Cars'},
            ],
            'layout': {
                'title': 'Basic Dash Example'
            }
        }
    )
])

server = app.server

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

Now we need want to give access of this directory to www-data if we intend to save data to something local here.:

chown -R www-data:www-data /var/www/FlaskApp

Finally, we just need to modify the WSGI script:

cd /var/www/FlaskApp nano /var/www/FlaskApp/FlaskApp.wsgi

Changing the import line to: from FlaskApp import server as application

#!/usr/bin/python3.6
import sys
import logging
logging.basicConfig(stream=sys.stderr)
sys.path.insert(0,"/var/www/FlaskApp/")

from FlaskApp import server as application

Now, just reload apache:

service apache2 reload

You should now be able to visit your server's IP address in a browser and see your dash application!