Menu

How to build and host beautiful web-based Python apps using Streamlit

Menno Liefstingh
Nov 25, 2021 12:42:28 PM

1*Qq2TRBTJyPNaq_blmvWWZAPython library Streamlit has been gaining fame as an incredibly easy to use framework for building interactive Python apps since its first release in 2019. Version 1.0.0 released last week, which also marks the introduction of Streamlit Cloud: a one-click hosting solution for Streamlit apps with a very useful free tier! In this blog post I'll show you how to develop an example app that you can deploy to Streamlit Cloud.

Getting started

Because the free tier of Streamlit Cloud requires your code to be stored in a public Github repository, you need to set up a repository first. Clone the repository into a local folder using git clone [your repository link] and set up a virtual environment (python3 -m venv newvenv and source newvenv/bin/activate). Then open up a new Python script in your favorite IDE, we'll call that streamlit-app.py
You can install Streamlit using the command pip install streamlit . Optionally, you can run streamlit hello to confirm the installation was successful and to look at a few cool example apps before you start building your own. 
We'll also be using a couple other libraries that you need to install in this tutorial, you can install these in your virtual environment using pip install matplotlib pandas seaborn pydeck .

image (1)-1

What we'll be building

For this simple introduction, we'll stick to a web application that visualizes data from the 2018 Squirrel Census done in Central Park, NYC. We start off by importing our data (that we conveniently downloaded and placed in the data/ folder):

 

This is what the favicon and page title look like in your browser!
This is what the favicon and page title look like in your browser!

Pretty straight-forward, but what is that @st.cache decorator we applied to the load_data function? Streamlit apps are interactive, and when something changes in the web app, e.g. because the user presses a button, the @st.cache decorator prevents Streamlit from loading the whole dataframe again. In this case this won't make much of a difference in terms of computational complexity, but if your dataframe had 600k rows, you would definitely want to cache it.

Writing text

Now that we've set that up, we can properly start adding content to our web application. Let's keep it simple for now and start with a title, a photo of Central Park to set the mood and a short introduction to our app. 

See how easy that was? Since Streamlit supports Markdown formatting, you can easily write bold or italic text or even use emoji's. We can now check out the results by typing streamlit run streamlit-app.py and going to http://localhost:8501 in any browser. 1*fyGqofYppwLgYNR9hFXtLg

Integrating Matplotlib

You can keep that page open as we add the next component of our app: a simple plot that shows the distribution of primary fur colors of our squirrel friends. Streamlit has a few built-in charting commands like st.line_chart and st.area_chart , but as we want something a little more fancy looking, we create a Seaborn count plot from our data. Since Seaborn is built on Matplotlib, we can display the resulting figure using st.pyplot .

When you save your code in your IDE and go back to the browser, you'll most likely see two buttons next to the hamburger menu in the top right of the page:

1*NivrrXx4p0IH_iW2W95ppg

That's right! You can keep editing your Streamlit app without re-running the server all the time. If you click 'Always rerun', all changes you make to your code will be updated live so you can get immediate feedback. If you did everything right, you should now see your new graphic pop up. 

Metric widgets and advanced layout

Because Streamlit is 100% Python-based, you can do things like using f-strings to refer to your data. Designing more advanced layouts, like using the recently introduced columns, is also done in a very Pythonic way. Columns are instantiated as objects with methods for different content options. In this next example, we add a paragraph that uses an f-string to retrieve the number of squirrels in the data. We also set up three columns showing a couple key metrics about the population. st.metric takes three arguments: the text, the number to be displayed and the delta: how much the value has changed.

1*5hE-Y2rv250GqFV7yjKfQQ

Building an interactive map

1*cX_BPKbSFZ20hPzdmFGsZQ

Perhaps the coolest widget in our app is the interactive map that shows the location of all the squirrels. To build this, we use Streamlit's PyDeck integration. PyDeck is a Python adaptation of deck.gl that lets you overlay layers of information on a map. We start the next section of the app with a little paragraph and a function that builds these layers using our pre-defined arguments. We then define a dictionary with three layer objects belonging to the three different colors. 

Now that we have these, we can use a st.multiselect widget to select which colors we want to display on the map. The multiselect widget simply returns a list of strings (layers) with the selected options. When this list changes, the magic of Streamlit automatically updates all elements that depend on this. We initialize the multiselect-widget with three arguments: the text to be displayed above the box, the list of options and the default options. We then substitute the strings in the layers with the layer objects as defined in the dictionary, which we can then pass to the pydeck map. 

When initializing the map, we set the initial view state to the average longitude and latitude so that the map is nicely centered over Central Park. We pass the layers list to pydeck and set a tooltip that displays the ID, the specific location and the activity of the squirrel at the moment of recording. Try it yourself and don't forget to change the fur color selection and see how Streamlit automatically updates the map. 

Deploying the app using Streamlit Cloud

Streamlit generously provides room on their servers to run your apps! The free tier allows you to run three projects online, with 1GB of RAM and 1 CPU dedicated to each app. To make our app ready to run in the cloud, we need to make a requirements file from our virtual environment so the remote instance knows which Python packages to install. We can do this with the command pip freeze > requirements.txt . Make sure you push this file and all other changes to your repository. 

1*ulaB1BvWPH4OYOhzbmHg5g

When you run your app locally, you'll find a 'Deploy this app' option in the hamburger menu in the top right. Click this, walk through the interface and voila! You've hosted your own interactive Python application online. Alternatively, you can also go to share.streamlit.io and deploy your app from there. Feel free to clone or fork the Github repository, check out the Streamlit documentation and try to come up with your own features. Good luck!