Streamlit App Banner

Hosting your first Python Web App with Streamlit

How to host your simple python script with Streamlit

Have you heard about streamlit? Probably not. But if you have, oh Man! please connect with me, I have some great discussions to be done with you.

For those who don’t know what streamlit. It is basically seeing your Python output on the web. No, certainly not that, but you can think it like that. It is basically an open-source Python framework for hosting Machine Learning and Data Science web-apps, but if you are not into these, there 100 more things you can do. Just show your python skills and streamlit will handle the Front End.

Now, the main question is why Streamlit and why I am writing about it, and what value it can add to a certain project. Streamlit gives you a hosting platform and a simplified UI with so many features like no one else. I found out about streamlit from a Youtube Video that had merely 1000 views.

The best part according to it is not it’s features but it’s own hosting facility share.streamlit.io that allows you to showcase your project in their own particular without hustling with other platforms. Obviously ther web-apps built with Streamlit is comaptible with Heroku, Netlify, Azure, AWS, GCP (Hey, hey, not just saying, tried and my god! I required toooo much debugging to be honest.).

First of all, you need to create an account on Streamlit share. it will take few hours to few days to get the approval. They are so much supportive, I got some issues with my account getting verification from Streamlit Share. I mailed Marisa from Streamlit, and she personally helped to gear up the process. A big shoutout to the community also.

After your account gets activated on their Share portal, you are all set to get going with streamlit. (Though, you can work on your local env before your account gets the verification and I saw some of the community discussions, they are speeding up the process) Create a GitHub repository. If you don’t have a account on GitHub, you can sign up and follow up with the process. After creating a new repository, clone the repository. To clone, open terminal for Mac or Ubuntu and Git Bash for Windows. One pro tip, in windows, Ctrl + Shift + V doesn’t work, it is Shift + Ins for them, they are different and we have to accept :(

mkdir myfirststreamlitapp
cd myfirststreamlitapp
git clone https://github.com/yourusername/yourrepositoryname
code ./yourrepositoryname

The last command will work only for VSCode. If you are using Atom, Sublime Text or any other IDE, open the folder with that IDE.

Open your integrated or seperate terminal, run ‘pip3 install streamlit’ or ‘pip install streamlit’. Wait for streamlit to be installed. Switch to the code repository. Create a python file. Write the hello world program with streamlit to test if it is working or not.

import streamlit as st
st.write('Hello, World!')

Then, go to your terminal of that directory and write

streamlit run yourfilename.py

It will show you the server where you can test it. Ctrl + Click to open the server. It will open at https://localhost:8501

streamlit run app.py will automatically open the python web app in your default browser, if not you can check with the local and network urls which would be provided by running the command

And, it will show the Hello World output like this.

Hello World Output for Streamlit

Also, a very useful feature is that streamlit.print fucntion allows you to write anything in markdown like shown in the below code and its output. (Remember, everytime you update and save your code, don’t forget to click on rerun on browser or you can choose the auto rerun option if you want streamlit to do it automatically)

import streamlit as st
st.write("""
# This is heading H1
## This is heading H2
### This is heading H3
#### This is heading H4
##### This is heading H5
###### This is heading H6
  
+ It also allow you
- to add bullets in
* different formats
""")

Output of Markdown demo

Now let’s build something very simple as a first project. Let’s create a simple

First, as usual, we will be importing the library. Then, we give a title of the project with st.write and like the previous example, I have chosen heading H3.

import streamlit as st
st.write("###  My First Calculator")

Now, we add some text input boxes, for streamlit we use st.text_input for text input and st.number_input for number input. Also, for giving a check box for the arithmetic operation, we used the st.selectbox function. there we have two parameters, a string and a list, the string is the header of the select box and the list elements are the options. Same goes for the ouptut type, just in this case, we use radio buttons, as there are. We can switch their use or use both as per choice. Follow the below piece of code to understand what I explained above.

first_number = st.number_input("Enter the First Number")
operation = st.selectbox(
"Select Operation", ("Add", "Substract", "Multiply", "Divide", "Modulus", "Raised to the Power"))
second_number = st.number_input("Enter the Second Number")
output_type = st.radio(
"Select Output Type", ("Int", "Float"))

Now, we just play with if-else and a little bit of formatted string to do the operations, store it in a result variable after doing the proper typecasting if needed and next, show it on the web using st.write.

st.write("### Output:")
# Doing required operation regarding the selected option
if output_type == "Float":
  
  if operation == "Add":
    result = (first_number+second_number)
    st.write(f"# {first_number}+{second_number} = {result}")
  elif operation == "Substract":
    result = (first_number-second_number)
    st.write(f"# {first_number}-{second_number} = {result}")
  elif operation == "Multiply":
    result = (first_number*second_number)
    st.write(f"# {first_number}*{second_number} = {result}")
  elif operation == "Divide":
    result = (first_number/second_number)
    st.write(f"# {first_number}/{second_number} = {result}")
  elif operation == "Modulus":
    result = (first_number % second_number)
    st.write(f"# {first_number}%{second_number} = {result}")
  elif operation == "Raised to the Power":
    result = (first_number**second_number)
    st.write(f"# {first_number}^{second_number} = {result}")
  else:
    st.write("Choose a valid operation")
if output_type == "Int":
  first_number = int(first_number)
  second_number = int(second_number)
  if operation == "Add":
    result = int(first_number+second_number)
    st.write(f"# {first_number}+{second_number} = {result}")
  elif operation == "Substract":
    result = int(first_number-second_number)
    st.write(f"# {first_number}-{second_number} = {result}")
  elif operation == "Multiply":
    result = int(first_number*second_number)
    st.write(f"# {first_number}*{second_number} = {result}")
  elif operation == "Divide":
    result = int(first_number/second_number)
    st.write(f"# {first_number}/{second_number} = {result}")
  elif operation == "Modulus":
    result = int(first_number % second_number)
    st.write(f"# {first_number}%{second_number} = {result}")
  elif operation == "Raised to the Power":
    result = int(first_number**second_number)
    st.write(f"# {first_number}^{second_number} = {result}")
  else:
    st.write("Choose a valid operation")

The above piece of code is pretty much self-explanatory. if you still have a problem, you can always connect with me or follow any standard documentation.

Now, go to the browser and see the changes or else if you have created a separate file, run ‘streamlit run seperatefilename.py’ in another terminal. The output will be something like this if you followed my code.

After running the local server & before entering any inputs

after entering input, you can see the output like the above picture.

Also, you can view the changes in the web server that is open while you wrote streamlit run app.py. If it is not updating, you can check it with rerun button.

Now, after you have done this. Push your code to GitHub using the below git commands in terminal or git bash according to your OS.

git add *
git commit -m "Initial Commit - Calculator"
git push 

If you don’t know how to use Git, you can follow my Youtube Video explaining the basic concept of git.

After you have pushed the code to GitHub, you are done with the coding part. Now it’s time to host your code with streamlit. Wait until you have the access for share.streamlit.io, once you get the access, sign in with your github account and click on new app.

new app streamlit portal

Now, enter the github repo url or select from the dropdown (it should be available in the dropdown)

select repository

Enter the file path. If it is in root and not any folder, then simple write the filename, in my case it is calculator.py

main file path

Now, click on deploy. And it will show the following screen.

app is in the oven for deplyment in the share streamlit server

Remember, as we have not even used a single library other than streamlit, so we don’t bother about the dependencies, but if you have used other libraries such as numpy, pandas, scikitlearn you have to generate a requirements.txt file and write the library name one by one.

Or else, you can use the pipreqs library of python that does it automatically. Install pipreqs by writing on terminal

pip3 install pipreqs

After the installing is successful, write,

pipreqs 

If it is not happening, then you need to write

pipreqs --force

After waiting for sometime, your app will be live and you will get the url.

shareable link will look like this

once it goes live, you can search the url to see how it is on the web

The Mobile View will look something like this

Mobile View

And that’s it. Your first streamlit web-app is live. Go show it to your peers and play around with streamlit for future projects. This year, I made the Google Cloud Facilitator Program Badge Generator and Qwiklabs Progress Tracker with streamlit, so you can guess how much it can be streched.

Also, share this with in your peers. And do follow me on GitHub: https://github.com/sagnikmitra and Twitter: https://twitter.com/mitrasagnik

The source code is available on: https://github.com/sagnikmitra/streamlit-tutorial

Thank You :) Do give this a clap if you like it.