💻 How To Deploy A Simple WebApp with Streamlit Heroku 💻

This was one of my mini lectures when I created for the students to have a quick and intuitive tutorial of how to create a simple webapp with Streamlit and Heroku.

I encourage people take a look at the Streamlit documentation before creating our own WebApp.

You can check my simple WebApp with this link.

Please check step by step of the instruction below:

Create a Web App with Streamlit and deploy on Heroku

(with the pre-made webapp.py)

1. Installation

Open Terminal/ Git Bash and run:

$ pip install streamlit

2. Create a working directory

• Unzip the file to the directory of your choice.
• The heart of the web app is webapp.py file which you can find all the codes.

3. Deploy the web app locally

Open Terminal/ Git Bash, using cd command to the directory where you unzip the file and run this command below:

$ streamlit run webapp.py

• Another browser tab will popup and show you the web app or you can copy and paste the Local URL which is generated by Streamlit to your browser. For example, from the terminal you can see:

  You can now view your Streamlit app in your browser.

  Local URL: http://localhost:8502   

4. Deploy the web app on Heroku

• Now you want other people could have the access to your awesome web app which is made easy with Heroku!

4.1 Create necessary files for Heroku

• Along with the webapp.py and the data folder that you need for Streamlit web app, we have to create some necessary files in order to deploy it on Heroku:

1. requirements.txt : will tell Heroku to install the following Python library and the corresponding version as the screenshot below:

   

NOTE: You may don't want to find these information manually so there is a Python library called pipreqs that can find all the library version that you're use for the webapp.py. Go to your Terminal/ Git Bash and run these command:

$ pip install pipreqs

 using cd command to your directory of the web app folder and run command:
 
$ pipreqs ./

=> It will produce requirements.txt file that contains the needed Python libraries!

BUT WAIT!!! There is one library that pipreqs didn't catch which is the scikit-learn library since it's not explicitly mentioned in the webapp.py. Because we are using sentiment_pipeline.pkl file, which was dumped by joblib, to predict the sentiment of a sentence and it was built by the scikit-learn library. Easy! We just need to run this command in Terminal/ Git Bash:

$ conda list

=> You can find the right scikit-learn version which is 0.23.2 to add to the requirements.txt file:

2. setup.sh : will handle issues regarding the server side in terms of the port number & it will add it to the configuration. You can just copy this .sh file to your folder, it doesn't need to be changed.

 ![Screen Shot 2021-05-05 at 9.18.51 PM.png](attachment:e605fcef-2849-4f40-960a-abb962006ebc.png)

3. Procfile : Essentially runs the setup.sh file and run the webapp.py. You can just copy the code in this file and only change the name of the .py file of your choice when you creat a web app (in our case is webapp.py ).

   NOTE: Procfile doesn't have any extension so you just need to save it as Procfile.
   

   

4.2 Upload your folder to your Github repository.

• Create a new repository with any name of your choice and make sure it's Public :

  

• Go to Terminal/ Git Bash and use cd command to navigate to the web app folder directory then run these commands to upload to your repository:

$ git init
$ git add .
$ git commit -m "first commit"

Now you have to go to your github to copy this link in your git repository as screenshot below (this step only takes one time to do):

back to your Terminal/ Git Bash and run these commands (please replace below GitHub repository link to your repository link):

$ git remote add origin https://github.com/andypham0702/web-app.git
$ git push -u origin master

You may have to input your github username and password in order to upload all the fils to your git repository.
Awesome! Now all the files are uploaded to your git repository!

4.3 Deploy web app on Heroku.

• Create an account in https://www.heroku.com/

• Create an unique name for your web app:

  

• In the Deployment method choose GitHub and connect to your repository as screenshot below:

  

• Scroll down and click Deploy Branch :

  

Great! After it's successfully deployed, now you can access the web app with this link: https://andy-cool-webapp.herokuapp.com

NOTE: if the you fail to deploy the webapp, it means you have to check requirements.txt and Procfile that they contains appropriate information.

EXTRA material:

• Since Streamlit can show Emoji so you can find a list of supported emojis in this link: https://www.webfx.com/tools/emoji-cheat-sheet/

• How st.cache can help to improve the web app performance: https://docs.streamlit.io/en/stable/caching.html

• For all your Streamlit questions, check out their documentation: https://docs.streamlit.io/en/stable/api.html