Creating an Interactive Multi-Page App with Streamlit

Streamlit is a powerful and user-friendly Python library that allows you to quickly build interactive web applications with just a few lines of code. It provides a simple way to create data apps, dashboards, and tools without needing to be a web development expert. One of Streamlit‘s standout features is the ability to easily create multi-page applications, which enable you to organize complex apps into multiple interconnected pages for improved navigation and user experience.

In this comprehensive guide, we‘ll dive deep into Streamlit‘s multi-page app functionality and walk through the process of building your own interactive multi-page application step-by-step. Whether you‘re new to Streamlit or looking to take your apps to the next level, this article will provide you with the knowledge and practical examples to get started. Let‘s begin!

What is a Multi-Page App and Why Use One?

A multi-page application, as the name suggests, is an app that consists of multiple pages or views that users can navigate between. Each page can have its own unique content, layout, and functionality. This is in contrast to a single-page app where all the content is loaded on one page and dynamically updated.

There are several compelling reasons to consider building a multi-page app in Streamlit:

1. Organization and Clarity: Breaking up a complex app into multiple pages allows you to logically organize different sections, making the app more intuitive and easier to understand for users.

2. Performance: By separating content across pages, you can improve the loading speed and responsiveness of your app. Users only need to load the specific page they are interested in rather than the entire app.

3. Modularity and Reusability: With a multi-page structure, you can develop each page independently as a self-contained module. This promotes code reusability and makes it easier to maintain and update individual pages without affecting the entire app.

4. Enhanced User Experience: Multi-page apps provide a familiar navigation experience that users are accustomed to from traditional websites. It allows users to easily move between different sections and find the information they need.

Streamlit‘s Multi-Page App Functionality

Streamlit offers a straightforward way to create multi-page apps using the concept of a "pages" directory. Here‘s how it works:

1. Create a directory named "pages" in your project‘s root directory.

2. Inside the "pages" directory, create separate Python files for each page of your app. The file names will determine the URL path for each page.

3. In your main app script, Streamlit automatically detects the "pages" directory and generates a navigation menu based on the Python files inside it.

4. Users can navigate between pages using the generated navigation menu or by directly accessing the URL paths.

It‘s important to note that the "pages" directory is a special directory recognized by Streamlit. You should not rename it or place it inside another directory.

Step-by-Step Tutorial: Building a Multi-Page Streamlit App

Now that you have a basic understanding of multi-page apps in Streamlit, let‘s walk through the process of creating one from scratch.

Step 1: Set Up the Project Structure

Start by creating a new directory for your project and navigate into it:

mkdir my-streamlit-app
cd my-streamlit-app

Inside the project directory, create a "pages" directory:

mkdir pages

Step 2: Create the Main App Script

In the project‘s root directory, create a new file called app.py. This will be the main entry point for your Streamlit app. Open app.py in your preferred code editor and add the following code:

import streamlit as st

st.set_page_config(page_title="My Streamlit App", page_icon=":rocket:", layout="wide")

st.title("Welcome to My Streamlit App")

st.sidebar.success("Select a page above.")

This code sets up the basic structure of your Streamlit app. It configures the page title, icon, and layout using st.set_page_config(). The st.title() displays a title on the main page, and st.sidebar.success() shows a success message in the sidebar.

Step 3: Create Individual Pages

Inside the "pages" directory, create separate Python files for each page of your app. For example, let‘s create two pages: "Page 1" and "Page 2".

Create a file called page_1.py inside the "pages" directory and add the following code:

import streamlit as st

st.title("Page 1")

st.write("Welcome to Page 1!")

# Add more content and components for Page 1

Similarly, create a file called page_2.py inside the "pages" directory with the following code:

import streamlit as st

st.title("Page 2")

st.write("Welcome to Page 2!")

# Add more content and components for Page 2

These files define the content and layout for each individual page. You can add various Streamlit components, such as text, images, charts, and interactive widgets, to customize each page according to your requirements.

Step 4: Run the Streamlit App

With the project structure set up and the individual pages created, you can now run your Streamlit app. Open a terminal, navigate to your project‘s root directory, and run the following command:

streamlit run app.py

Streamlit will start a local development server and open your app in a web browser. You should see the main page with a navigation menu in the sidebar, allowing you to switch between Page 1 and Page 2.

Best Practices and Tips for Multi-Page Apps

When building multi-page apps in Streamlit, consider the following best practices and tips:

1. Organize Pages Logically: Arrange your pages in a logical order that makes sense for your app‘s flow and user journey. Use descriptive and meaningful names for your page files.

2. Reuse Components: If certain components or sections are common across multiple pages, consider creating reusable functions or classes to avoid code duplication.

3. Use Consistent Styling: Maintain a consistent visual style and branding across all pages to create a cohesive user experience. You can use CSS to customize the look and feel of your app.

4. Optimize Performance: Be mindful of the size and complexity of the content on each page. Avoid loading unnecessary data or performing heavy computations that could slow down the app. Use caching and lazy loading techniques when appropriate.

5. Handle Navigation: Provide clear and intuitive navigation options for users to move between pages. Use Streamlit‘s sidebar or other navigation components to create a user-friendly interface.

6. Test and Debug: Thoroughly test your multi-page app to ensure smooth navigation, proper functionality, and responsiveness across different devices and screen sizes. Use Streamlit‘s built-in debugging tools and logging capabilities to identify and fix any issues.

Customizing the Look and Feel

Streamlit provides various options to customize the appearance and behavior of your multi-page app. Here are a few ways you can personalize your app:

1. Page Configuration: Use the st.set_page_config() function to set the page title, favicon, layout, and initial sidebar state for each page. This allows you to create distinct looks for different pages.

2. CSS Styling: Streamlit supports adding custom CSS styles to your app. You can create a separate CSS file and link it to your app using the st.markdown() function. This gives you fine-grained control over the visual appearance of your app.

3. Themes: Streamlit offers built-in themes that you can apply to your app with a single line of code. Use the st.set_page_config() function with the theme parameter to choose from light or dark themes, or create your own custom theme.

4. Sidebar Customization: The sidebar is a prominent feature in Streamlit apps. You can add branding, logos, or additional navigation elements to the sidebar using the st.sidebar functions.

5. Responsive Design: Streamlit apps are responsive by default, adapting to different screen sizes. However, you can further optimize the layout and components for different devices using CSS media queries and Streamlit‘s layout functions.

Deploying a Multi-Page Streamlit App

Once you have developed and tested your multi-page Streamlit app locally, you may want to deploy it to a web server for others to access. Streamlit makes it easy to deploy apps to various platforms. Here are a few deployment options:

1. Streamlit Sharing: Streamlit provides a free hosting service called Streamlit Sharing. You can easily deploy your app by uploading your project to a GitHub repository and connecting it to Streamlit Sharing. It automatically builds and deploys your app, providing a shareable URL.

2. Heroku: Heroku is a popular cloud platform that supports deploying Python applications. You can create a Procfile and requirements.txt file in your project, and use Heroku‘s web interface or command-line tools to deploy your Streamlit app.

3. AWS, GCP, or Azure: If you prefer using cloud services like Amazon Web Services (AWS), Google Cloud Platform (GCP), or Microsoft Azure, you can deploy your Streamlit app using their respective deployment mechanisms and services.

4. Self-Hosting: If you have your own web server or virtual private server (VPS), you can deploy your Streamlit app by setting up the necessary environment and running the app using a process manager like Supervisor or systemd.

Conclusion

Building multi-page applications in Streamlit is a powerful way to create interactive and user-friendly data apps and dashboards. By leveraging Streamlit‘s simple and intuitive multi-page functionality, you can organize complex applications into multiple interconnected pages, enhancing the user experience and making your app more modular and maintainable.

Throughout this article, we covered the key concepts and steps involved in creating a multi-page Streamlit app. We explored the benefits of using a multi-page structure, learned how Streamlit‘s multi-page functionality works, and walked through a step-by-step tutorial on building a basic multi-page app. Additionally, we discussed best practices, customization options, and deployment strategies to help you create polished and professional-looking apps.

Remember, the key to building successful multi-page apps in Streamlit is to keep the user experience in mind. Organize your pages logically, use consistent styling, optimize performance, and provide clear navigation options. With Streamlit‘s powerful features and the guidance provided in this article, you‘re well-equipped to create impressive and interactive multi-page applications that engage and delight your users.

So go ahead, experiment with Streamlit‘s multi-page functionality, and unleash your creativity in building amazing data apps and dashboards!