Join us

How to Create a multipage web app using Streamlit?

Photo by Christina @ wocintechchat.com on Unsplash

We will see how to create a multipage web app from scratch.

Streamlit is one of the best tool for a Data Scientist. It is easy to learn, built on top of python, and has amazing features for creating web applications. Earlier Streamlit allowed only single-page websites but now they have added a feature for creating multipage web apps.

In this tutorial, we will see how to create a multipage web app from scratch.

1) Installing streamlit.

open your terminal and type the following command :

2) Creating a project and adding the relevant files

create a directory for your new project and add a python file, this file will be your home page on the website. for e.g: I have created the ‘Co2_Emission_updated’ folder and added the ‘home.py’ as the home page.

Now for the other pages, we have to add a ‘pages’ folder that will contain the python files for other pages.

Add the python files in the pages directory in the same way shown below.

pages/page1.py, page2.py

We can add emojis or numbers to the python files to make the web app more attractive.

Added emojis

3) Running the code on the local machine.

After writing the relevant code for each page run the main home.py file in the terminal using the following command.

this is the output on the main page.

we can toggle between the pages just by clicking on them.

this is the output of 1st page

That’s it your multipage web app is ready. This is the link to the project that I have used in the tutorial = GitHub (https://github.com/suraj4502/Co2_emmission_updated)

Look at the difference between a single-page web app and a multi-page app of the same project.

project :(https://share.streamlit.io/suraj4502/co2_emission_prediction-project-/app.py)

updated : (https://share.streamlit.io/suraj4502/co2_emmission_updated/_%F0%9F%8F%A1_Home.py)


Summary

  1. creating a directory.
  2. creating the home.py file.
  3. creating pages folder.
  4. adding the python files for the pages.
  5. running the app.


For more info and in-depth understanding visit the streamlit docs page.

Streamlits Docs

…


Only registered users can post comments. Please, login or signup.

Start blogging about your favorite technologies, reach more readers and earn rewards!

Join other developers and claim your FAUN account now!

Avatar

Surajkumar Yadav

student

@suraj4502
An aspiring DATA SCIENTIST.
User Popularity
33

Influence

3k

Total Hits

1

Posts