📖 Further Learning: For a complete guide on how to build your beautiful dashboard app in pure Python, check out our best-selling book Python Dash with San Francisco Based publisher NoStarch.
Here’s the step-by-step approach of how to deploy your Dash app on Pythonanywhere.com using Flask and pip:
- Create an account on Pythonanywhere.com.
- Create a Flask application.
- Create a Dash application.
- Copy the Dash app into the Flask app.
- Connect the Flask server with the Dash app.
- Modify the WSGI configuration file.
- Install Dash with pip in your bash shell (e.g.,
pip3.7 install dash --user)
- Refresh your Flask server.
How to Integrate Dash with Your Existing App
Do you have an existing non-dash app and you want to integrate a dashboard within it?
For instance, a great alternative would be CanvaJS. I’m not affiliated with those guys but they created a great framework that can be used on any website. Heck, you could even use Plotly graphs on your website to visualize data. (These are the creators of Dash.)
The reason why I don’t advocate to use dash in your existing (HTML/CSS/JS) application is that it’s tedious, error prone, and it slows down your website.
I’ll give you three ways—ordered by difficulty:
1 – Place Links Intelligently
Believe it or not, I came up with this genius strategy all by myself. Instead of integrating your app with Dash, you just link to your separate (independent) Dash app so that it appears like the two websites (your original and the Dash app) are working together and are tightly integrated. However, they’re running independently and you can avoid all the struggles and keep living the simple life.
2 – Use iFrames
On the official Dash site for this issue, they recommend using an
💡 An iFrame is an HTML element that allows you to embed any website Y on website X. It’s like a window into the other website.
On page X, you can define the size of the window and the environment around the window. But you can control little more.
While this may work theoretically, it often slows down websites and causes security issues. Some web browsers block the use of iFrames altogether. So, it may happen that users don’t even see your great Dash application!
Do you still want to try it with iFrames? Okay, so go for it:
- Include an
<iframe>element in your HTML site.
- Point the
srcattribute towards the address of your Dash app.
- Place your Dash app iFrame within your website defining your desired dimensions:
<iframe src="http://localhost:8050" width=1200 height=800></iframe>
Here’s how such an embedded iFrame Dash app looks on the Finxter website:
It doesn’t look pretty, does it?
Using an Existing Flask App
Yes, all the programmers out there are salivating. It’s just beautiful to natively integrate two apps, isn’t it? Well, if you think so. I think, it’s a big mess and you’ll curse yourself for doing it.
Access the Flask app via
app.server and assign it to a variable (e.g.,
import dash app = dash.Dash(__name__) server = app.server
As an alternative, pass your Flask app instance into Dash when instantiating the app in the
dash.Dash(...) initialization routine.
import flask server = flask.Flask(__name__) app = dash.Dash(__name__, server=server)
What did you accomplish? The
server variable now holds the Flask instance. This allows you to add any route and custom functionality like this:
@server.route('/hello') def hello(): return 'Hello, World!'
You can see such an example in the code given here:
from flask import Flask from dash import Dash import dash_core_components as dcc import dash_html_components as html server = Flask(__name__) app = dash.Dash( __name__, server=server, url_base_pathname='/dash' ) app.layout = html.Div(id='dash-container') @server.route("/dash") def my_dash_app(): return app.index()
But the authors of the code share the same disclaimer: it sucks! You lose a lot of integrated Flask functionality when working from inside Dash like this.
Maybe go back to Method 1? A better way is to use Dash from inside Flask—instead of using Flask from inside Dash. You can see how this works here (scroll down to the heading “Combining One or More Dash Apps with Existing WSGI Apps”).
Python Dash Book
If you’re interested in learning more about how to create beautiful dashboard applications in Python, check out our new book Python Dash.
You’ve seen dashboards before; think election result visualizations you can update in real-time, or population maps you can filter by demographic.
With the Python Dash library you’ll create analytic dashboards that present data in effective, usable, elegant ways in just a few lines of code.
While working as a researcher in distributed systems, Dr. Christian Mayer found his love for teaching computer science students.
To help students reach higher levels of Python success, he founded the programming education website Finxter.com. He’s author of the popular programming book Python One-Liners (NoStarch 2020), coauthor of the Coffee Break Python series of self-published books, computer science enthusiast, freelancer, and owner of one of the top 10 largest Python blogs worldwide.
His passions are writing, reading, and coding. But his greatest passion is to serve aspiring coders through Finxter and help them to boost their skills. You can join his free email academy here.