European Soccer League Results App With Streamlit (Part 1)
How to setup and run a streamlit app locally
Author: Ali Shahed
Summary
In this series of articles, we learn how to run a simple streamlit data app locally and deploy the app in streamlit community cloud for everybody to use. I divided this article into two installments. In part 1, i.e this article, I describe how to set up your environment to run the European Soccer League Results App locally. In part 2, I will explain the steps that are needed to deploy the European Soccer League Results App to Streamlit Community Cloud for the public. Make sure to follow me to be notified when I publish part 2 of this article. (Part 2 is here)
Bonus: Here is my version of the app that I have already deployed to Streamlit Community Cloud.
What do we need?
- An account in streamlit community cloud: Streamlit is a popular open-source Python library that allows data scientists and developers to create and deploy web applications for machine learning and data science projects with ease. It provides a simple and intuitive way to create interactive dashboards, data visualizations, and other web-based applications. Streamlit Community Cloud is a platform that provides users with a powerful and scalable infrastructure to host and share Streamlit apps with others. We use Streamlit Community Cloud to host our app. It is not the only way to deploy streamlit app but it is the easiest one.
- A Github account: We use GitHub repository to host our code. Moreover, Streamlit Community Cloud has integration with GitHub that makes our app deployment straightforward. If you are not familiar with GitHub, check out my article titled “Essential Git and GitHub for Beginners”
- Python 3 and a virtual environment: We use python 3.6+ for our purpose. It is also highly recommended to use virtual environments especially when you are working on a number of projects with various library requirements. I use Pyenv + Virtualenv for managing python versions and virtualenvs. You can check my article titled “Setup your Python projects like a pro with Pyenv and Virtualenv on MacOS”. Of course, if you are using other tools, e.g. Conda, it is perfectly fine.
- Google Cloud Platform (GCP) Account (optional): I have used GCP bucket for hosting the datasets for the app. However, you can host it in AWS bucket or with the code in GitHub or even as a Google sheet in google drive. Check out all the options which are possible here.
Hosting the datasets in GCP storage
- The datasets that we are using are the following two datasets. Download them to your computer.
- Create a GCP account, create a project and a bucket in the project, and upload the .csv files into the created bucket. If you are new to GCP, check out the tutorial on how to do these steps in Streamlit docs.
- Make sure to read the mentioned document and particularly remember to create the key file in .json format and save it somewhere on your computer that you can access later.
Download the code for the app from GitHub
The code that I used to create the app is hosted in a public repository in my GitHub.
Download the code base to a place where you want to start your development. The file will be downloaded in .zip format and you need to extract it to the location of your choice.
Set up your development environment
I assume that you have already checked my tutorial that I mentioned in the summary and you have already installed pyenv and virtualenv as well as one of the 3.6+ python versions. The first step for us is to create a virtual environment. For that, you can run this line in CLI.
pyenv virtualenv 3.8.12 ds_streamlit_3_8_12The above command creates a virtual environment named “ds_streamlit_3_8_12” which is based on the Python 3.8.12 . Then, we activate the virtual environment.
pyenv activate ds_streamlit_3_8_12and you will see something like this
ali@ali-System-Product-Name:~$ pyenv activate ds_streamlit_3_8_12
pyenv-virtualenv: prompt changing will be removed from future release.
configure `export PYENV_VIRTUALENV_DISABLE_PROMPT=1' to simulate the behavior.
(ds_streamlit_3_8_12) ali@ali-System-Product-Name:~$
The next step is to install the packages that are required for the app to run. You can run the following command to install all the required packages from the requirements.txt file that is in the downloaded repository.
pip install -r requirements.txtOne final step before you need to run the app locally is to add the “secrets file” to the app. This secret file host all the credentials that your app needs to read the datasets from GCP bucket. Create a folder named “.streamlit” in your app’s root directory and inside that directory create a file named “._secrets.toml”. Here, is an example of the .toml file. You need to feel out the “xxx” parts with the contents of your .json file.
# .streamlit/secrets.toml
[gcp_service_account]
type = "service_account"
project_id = "xxx"
private_key_id = "xxx"
private_key = "xxx"
client_email = "xxx"
client_id = "xxx"
auth_uri = "https://accounts.google.com/o/oauth2/auth"
token_uri = "https://oauth2.googleapis.com/token"
auth_provider_x509_cert_url = "https://www.googleapis.com/oauth2/v1/certs"
client_x509_cert_url = "xxx"Also, pay attention that in the downloaded codebase from GitHub there is a .gitignore file. We listed this .toml file there to make sure your GCP secrets won’t be uploaded to your codebase later.
After all these steps, your local file structure should look like this.
Now you ready to run the app and see the result locally using this command.
streamlit run european_league_app.pyCongratulation! Your app now is running locally and you can see similar lines in your terminal.
And this in your browser
In the second part of this article, I will describe the steps that are needed to deploy this app to Streamlit Community Cloud. Follow me (or even better, subscribe by email) not to miss the second part!
If you buy me a coffee, I can work longer hours and create more content like this. Thank you!
