Build a Webapp on Streamlit and ship with a Docker image - A Beginner's Adventure

Requirements for this project

• A machine with Linux based OS or macOS
• Python 3
• Docker

For windows users - You can proceed by installing the Windows Subsystem for Linux

Step 1 - Get a cup of coffee and some good music!

Open up your system and chillax with a cup of coffee (or any beverage you prefer) - legend has it, coffee is the best friend of a developer. Also, if this suits your practice, put on some good music too!

(Oh c'mon, developers are not always boring...)

Step 2 - Primary Setup

• Setup your local and remote git repositories. I am using this github.com/ineelhere/devops/tree/dockers for this blog. You will find all the codes here. Try not to pull/use this same repository and setup one of your own on GitHub or any other platform that you prefer.
• Linux users install figlet with (ubunlog.com/en/figlet-banners-ascii-terminal)

  sudo apt install figlet
  

• macOS users install figlet (formulae.brew.sh/formula/figlet) with

  brew install figlet
  

• In your project folder, create a python3 virtual environment (docs.python.org/3/library/venv.html)

  python3 -m venv docker-demo
  

  If this is the first time you are creating a virtual environment, you might need to install the tool first. Should you be in trouble, use this command sudo apt install python3.10-venv. Remember to change the python version in the command as per your machine

• Activate the virtual environment you just created

  source docker-demo/bin/activate
  

Step 3 - Install the relevant python packages

We will need to install the streamlit python package now. (streamlit.io)

pip3 install streamlit

Now when you install streamlit you will see that it installs other packages as well - which are it's co-dependencies. Now think of a scenario that you are reading the article in 2023 and a lot has changed already. Lets say there has been some change in the latest package that changes the whole development procedure. So in that case, the codes listed here will definitely not work!

So, how about we list all the packages installed inside this virtual environment with all specific version information?

pip3 freeze requirements.txt

This requirements.txt file will be your single point of reference to reproduce the exact same environment I have been creating now!

Step 4 - Code Code Code!!!

All codes available here

We are now ready to write the python code that will basically give our webapp a frontend and allow creating the figlets.

• Import the streamlit and os packages

  import streamlit as st
  import os
  

• Set a title for the webapp - how about Turn Text to Figlet ?

  st.title("Turn Text to Figlet")
  

• Read input text from user Here we read the text from the user into a variable (which is also named text) using the text_input widget.

  text = st.text_input("Enter Text:")
  

• Pass that input to the OS and run figlet So we are using the os package to communicate with our linux kernel here. Using the os package we run the command to generate the figlet for text provided by user. The figlet hence generated is being displayed to the user on the app using the text element available from streamlit library. We will do this only if the user has actually provided some input - which is why the if statement has been used here.

  if text:
    os.system(f'figlet -c {text} > figlet.txt')
    st.text(open('figlet.txt', 'r').read())
  

P.S. A footer has been used using markdown just for bewutification/reference purposes. If this is something you would want to explore further, please refer to streamlit documentation

Here is the whole code (to start with...) Also available on github - github.com/ineelhere/devops/tree/dockers

import streamlit as st
import os

st.title("Turn Text to Figlet")

text = st.text_input("Enter Text:")

if text:
    os.system(f'figlet -c {text} > figlet.txt')
    st.text(open('figlet.txt', 'r').read())

st.markdown("""
___
[@ineelhere](https://github.com/ineelhere/)
""", unsafe_allow_html=True)

Run the webapp with the command (lets assume the code is present in the file app.py)

streamlit run app.py

Step 5 - Docker-ize the app and push to dockerhub

• If you are new to the concepts of Docker then get ready to be blown away (not literally)
• Docker containers allow you to ship and run your code in an isolated environment exactly configured according to the environment where you actually developed your app. (and its much more than that!)
• Now to run containers we need docker images - and to build docker images, we need to have Dockerfile, which actually has the instructions of what has to be done once the container containing your code is run.

Here is the Dockerfile for this project (you will need to change the github sources for building an image with your code)

#we will use ubuntu as the base image as available at https://hub.docker.com/_/ubuntu
FROM ubuntu:latest

# installing git and figlet
RUN apt-get update \
    && apt-get install -y git \
    && apt-get install -y figlet;

# clone the github repo and set up the env with the required packages
RUN apt-get install -y python3-pip \
    && git clone -b dockers https://github.com/ineelhere/devops.git \
    && pip3 install -r ./devops/requirements.txt;

# expose port 8501
EXPOSE 8501

# mention the entrypoint and command
ENTRYPOINT ["streamlit", "run"]
CMD ["./devops/app.py"]

Now build the image by the command

docker build -t figletapp .

Once the above step is complete, create a DockerHub account with a username and password. Lets assume your username is "ineelhere"

Then create a new repository. Lets say you named it "figletapp". So the repository name becomes ineelhere/figletapp

On your PC, using the CLI, login with the command

docker login

Now that you are logged in through your CLI, you will have to tag the local image to the remote repository and basically push the local image to remote destination. Follow these two commands -

docker tag  figletapp:latest ineelhere/figletapp:v1
docker push ineelhere/figletapp:v1

So now on your DockerHub account you will see an image has been pushed and ready to be used - just like hub.docker.com/repository/docker/ineelhere/..

You can pull this image on your system or any destination with the command

docker pull ineelhere/figletapp:v1

And run the app with the command

docker run ineelhere/figletapp:v1

• So this was a short journey to get started with an expedition involving development and shipping of your code. This might seem very overwhelming now, but trust me, you've got it! Just keep going! :)

• Do read docker.com/why-docker and get a clearer picture.

• For complete guide to building docker images, refer to docs.docker.com/engine/reference/builder

Step 6 - Enjoy!

That's all for now, folks. Enjoy coding and enjoy life - yes, coders have a life and they also enjoy it ;)