Creating a multi-page Dash Application
Building and deploying a multipage Python webapp in a few simple steps
Following the reception of my previous article on creating a multi-page webapps using Streamlit, I decided to write another article about building a similar webapp using a different framework — Dash.
This article will introduce you to Dash applications and provide a method to create multipage applications in Dash using pagination.
Dash — An Introduction
Dash is an open-source Python framework created by Plotly used to build low-code data apps. It is built on top of Plotly.js, React.js and Flask and allows the user to create interactive data apps and dashboards without the knowledge of HTML, CSS or Javascript. It is an extremely useful tool to especially for data scientists looking to build machine learning apps without knowing any web development technologies.
The following section expects you to have some knowledge about Dash and will not teach about it’s components from scratch. If you want to learn more about Dash basics, here’s a good tutorial to get started with. This article will focus on the pagination and deployment. Let’s get started!
Building the application
To follow along, here’s the Github repository which contains all the code for this tutorial.
Install the required libraries
For this project, we will require dash and dash_bootstrap_components. The latter is a library of Bootstrap components for Dash, that makes it easier to build consistently styled apps with complex, responsive layouts.
pip install dashpip install dash_bootstrap_components
Create the navbar
Since we are building a multi-page application, a navbar is required to navigate between the different pages that we create. I am using Bootstrap to build the navbar through the dash_bootstrap_components. The navbar component is defined in the components directory and can be reused inside any page.
The output of the above code will look something like this.
This navbar has two pages Page 1 and Page 2 . They redirect to /page1 and /page2 respectively which has been defined in the href argument.
Define the page structure
After we have made the navbar, let’s move on to making our pages. Both Page1 and Page2 reside in the pages folder. In the page1.py and page2.py file, we will define the page layout which will then be used in the main app.
The second page can also be defined in the similar manner. This is what it looks like. The code for the page can be found here.
These pages can be customized as required. After creating the pages folder and adding the pages to it, add an empty __init__.py file to the directory to convert it into a module, as shown below.
pages directory structureCreate the Dash app
We also need to define the Dash main app where the settings for the application and the other attributes reside. So, we will create an app.py file and define the Dash app object there.
Bring it all together — index.py
This is where all the magic happens. We define the page structure as well as the pagination and import the app.
This piece of code in the index file manages the various pages of our application as well as imports the app which runs the Dash application.
Finally, to run the app in your local server
python index.py So, if you followed all these steps, your application should be running successfully and you will see something like this.
Conclusion
By the end of this tutorial, you will have a running multipage Dash application. You can also deploy it to the cloud using tools like Heroku or PythonAnywhere.
I write about Python, Data Science and Finance here.
