How to Create a Multipage Dash App
Introduction
In this article you’ll learn how to create a Plotly Dash app with multiple pages. By following this tutorial you’ll have a template you can use for any future projects that would require a multi-page data dashboard.
“Dash is a productive Python framework for building web analytic applications.
Written on top of Flask, Plotly.js, and React.js, Dash is ideal for building data visualization apps with highly custom user interfaces in pure Python. It’s particularly suited for anyone who works with data in Python.” [1]
To get a broader sense of what Dash is capable of, and to get your creative juices flowing, head over to the Dash App Gallery to see some examples of what this powerful tool can accomplish.
What We’ll Build Today
To give you a sense of what you’ll accomplish in this tutorial, the figure below shows the skeleton template we’ll create which is completely customizable after you’ve set it up. Think of it as a boiler plate for any project that would require a multipage dashboard. If you’re already familiar with Dash and want to save time and still make use of the boiler plate code, head on over to my GitHub and download it. No feelings will be hurt.
Creating the Template
Install Packages
If you’ve never used Dash before, there are a few packages you’ll need to install for this project. I’ve included installation commands for both those using Anaconda to run Python, and vanilla Python users.
# For the Anaconda Users:
$ conda install -c plotly plotly
$ conda install -c conda-forge dash
$ conda install -c conda-forge dash-bootstrap-components# For the native Python Users:
$ pip install plotly
$ pip install dash
$ pip install dash-bootstrap-components
Side Note: while you can use Jupyter Notebooks for writing your Dash code, I personally don’t recommend it. If you do choose to go that route, the code I provide in this article will need to be altered slightly. You can take a look at my GitHub for a brief description of how to run Dash from a Jupyter Notebook.
Initializing the App
Now that all the required packages are installed, our first step is to create a Python file call app.py . This file will basically make our Dash application runnable and allow us to set some CSS to beautify our app a little bit.
import dash
import dash_bootstrap_components as dbcapp = dash.Dash(__name__, suppress_callback_exceptions=True, external_stylesheets=[dbc.themes.LUX])
There are a few things happening here we should talk about. First, as with everything, we’re importing the proper libraries. Next we’re instantiating our app through the dash.Dash call. Inside the call we set the callback exceptions to be suppressed so we don’t have error messages popping up in our users’ face if we wrote bad code.
The external_stylesheets parameter allows us to link to Bootstrap CSS to make our application pretty. You see I’ve chosen the LUX theme for this particular app. This is where you would customize the look and feel of your app if you are so inclined. The full list of available themes can be found in the Dash Bootstrap Components Themes Documentation. Outside the scope of this tutorial, there are a bunch of bootstrap components you can make use of as well so make sure to check out that documentation as well.
Creating a Navbar
It may seem a little counterintuitive but the next step I suggest in the process is creating the navbar because it will appear on all the pages we set up from here on out. Like we discussed a moment ago, Dash Bootstrap Components comes with all sorts of useful tools you can utilize with very little code. For the sake of simplicity and speed, we’ll use the NavbarSimple component provided in the Dash documentation. We’re creating it in a separate py file so we can import it on every page.
Create an Index for Site Navigation
The next step is to create a py file to handle the navigation of our app. You’ll see a lot of people set this navigation in their app.py file but it made more sense to me to create it in a separate script because it seemed cleaner and easier to keep track of.
I won’t go through every detail here but essentially what this script does is act as a router for callbacks. It takes in a URL and returns a page as you see in the decorator @app.callback. The display_page function takes the path name from the decorator and determines which page should be loaded. Inside this function you see calls to other functions we haven’t written yet. For example create_page_home() . We’ll get to this in a moment but what that does is make a call to another py file to get the contents of the home page.
Creating the Pages
Let’s start by creating the home page. First thing we’ll do is import the Navbar we created earlier so it appears at the top of the page. Next we’ll just put a placeholder header in there with the words “Welcome to home page!” This way when you’re debuging and switching between pages you’ll know if if it’s worked. Next, create a function that uses the HTML components and returns the page layout. This create_page_home function is what is being called in the index.py file we talked about a minute ago. The index file pulls the page layout information from this function.
The next two pages are nearly identical so they won’t require much explanation. Just remember that for every page you create, you need to add it to your index.py file and your Navbar if you’d like a link to the page in there as well. Here is the code for page two with only a slight alteration to the header text:
Finally, the third page with another slight alteration to the header text:
Running the App
Congrats! You did it. Now it’s time to reap the benefits of all that hard work. To run the app simply run the index.py file. In your command line you’ll see something similar the following:
Copy the URL and enter it into a browser. You should now see your app running in all its glory!
Conclusion
Congratulations! You now know how to create a Plotly Dash App with multiple pages using Bootstrap CSS. Yet another useful tool to keep in your back pocket and a boiler plate template to save time for your future self. If you have a Dash App that you’d like to make useable by others, check out my tutorial about deploying your Dash App on Heroku in the link below. As always, if you have any questions, please leave a comment and I’ll be happy to help.
References
[1] Plotly. (n.d.). Introduction to Dash. https://dash.plotly.com/introduction
