European Soccer League Results App With Streamlit (Part 2)

How to deploy the app on the streamlit community cloud

Author: Ali Shahed

If you have followed part 1 of this article, you should have the Streamlit app running locally on your computer. In this article, we go one step further and describe the steps that you need to take to deploy your app on Streamlit community cloud service and share the app with the public. These are the steps you need to deploy your app:

1. Create a GitHub repository and host your codebase there.
2. Connect your GitHub repository to the Streamlit community cloud.

Bonus: Here is my version of the app that I have already deployed to Streamlit Community Cloud.

Create your Github repository (Mac os)

Here we go through the steps that you need to follow in order to create a git repository and place your code there. For more info on Github and its basic operations, you can check my article Essential Git and Github for Beginners .

• First, make sure you have Git installed on your Mac. If not, you can download and install it from https://git-scm.com/download/mac.
• Open Terminal on your Mac.
• Navigate to the directory where you have saved the project. Assume, your directory name is “European_league_streamlit_app” under “Desktop”, you should type this command:

cd ~/Desktop/Eropean_league_streamlit_app

• Now, initialize the Git repository on your local directory:

git init

• Configure your Git identity (if you haven’t already), and replace “Your Name” and “youremail@example.com” with your actual information:

git config --global user.name "Your Name"
git config --global user.email "youremail@example.com"

• Stage and commit all the codes that you have in the directory with the message “initial commit”.

git add .
git commit -m "Initial commit"

Note that in the original codes that you have copied from my Github, there is a file “.gitignore”. You can write the names of files that you don’t want to be pushed to Github. For example, we need the file “secrets.toml” in this file as all the API keys from GCP are saved there.

• Go to GitHub (https://github.com) and sign in to your account.
• Click the “+” icon in the upper right corner, and select “New repository”.
• Enter a name for your repository, choose its visibility (public or private), and click “Create repository”.
• On the new repository page, you’ll see a section called “…or push an existing repository from the command line”. Copy the URL provided under that section (it should look like “https://github.com/username/repository_name.git"). Where “username” is your username and “repository name” is the name that you chose for your repository.
• Add the remote GitHub repository URL to your local repository:

git remote add origin https://github.com/username/repository_name.git

• Push your local changes to the remote repository:

git push -u origin master

If you have enabled two-factor authentication for your GitHub account, you might need to generate a personal access token and use it as your password when prompted.

Now your local code has been pushed to the GitHub repository and you should see the app code in your GitHub repository.

Connect GitHub repository to the Streamlit community cloud

Now that you have the code in Github, you need to let Streamlit community cloud know about it. Here are the steps you need to follow.

• Go to the Streamlit community cloud page and log in to your account. (If you don’t have an account you need to create one.)
• When you log in, you see a page like this ( I have a couple of apps there. Yours will be empty.)

• Click on the “New app” button. A form pops up.

• Copy and paste your repository link from Github, its branch, and the main file path into the form. ( In your case the main file is “european_league_app.py”)
• DON’T PRESS THE “DEPLOY!” BUTTON YET! we need to add the secret information too. For that click on “Advanced settings…”. Another form pops up…

• Now, copy and paste all the lines from the file “secrets.toml” to the form and click save.
• You can safely press “Deploy!” now. Wait for a while and your app is now deployed. Enjoy!
• Bonus point: After deployment, you can switch the visibility of your app between private and public by clicking on the vertical ellipsis which opens the menu, and going to “setting”. In sharing menu there you can change the visibility of your app.

If you like this article and want to see more, click on the banner below and buy me a coffee so I can work longer hours and create more content like this. Thank you!