Lab 2: Streamlit dashboard container

Note

View lab files on GitHub

Learning objectives

  • Containerize a web application (Streamlit)

  • Understand port mapping to access containerized apps

  • Use volumes to share data between host and container

  • Work with containers in detached mode

  • See how containers make applications instantly portable

What’s included

  • app.py: An interactive Streamlit dashboard for data visualization

  • Dockerfile: Instructions to build the containerized app

  • .dockerignore: Files to exclude from the build

The scenario

You’ve built an interactive data dashboard for your team. By containerizing it:

  • Team members can run it without installing Streamlit, pandas, or plotly

  • The app works identically on macOS, Windows, and Linux

  • You can deploy and scale it on any cloud platform

  • Multiple versions can run simultaneously on different ports

  • It can easily be updated and/or changed independently of other components

Step-by-step instructions

1. Examine the Dockerfile

Navigate to the example directory:

cd 02-streamlit-app

Notice new elements compared to Lab 1:

FROM python:3.11-slim
WORKDIR /app
RUN pip install streamlit pandas plotly  # Multiple packages
COPY app.py .
EXPOSE 8501                              # Document the port
ENV STREAMLIT_SERVER_HEADLESS=true       # Environment variable
CMD ["streamlit", "run", "app.py", ...]  # Run web server

New concepts:

  • EXPOSE 8501: Documents that the container listens on port 8501 (Streamlit’s default)

  • ENV: Sets environment variables (tells Streamlit not to open a browser)

  • Multiple packages installed in one RUN command (faster build)

2. Build the image

docker build -t streamlit-dashboard .

This might take a minute as it installs Streamlit and dependencies.

3. Run the container with port mapping

docker run --rm -p 8501:8501 streamlit-dashboard

What’s happening:

  • -p 8501:8501: Maps port 8501 on your computer to port 8501 in the container

  • Format is -p HOST_PORT:CONTAINER_PORT

  • Now you can access the containerized app via localhost

4. Access the dashboard

Open your browser and navigate to:

http://localhost:8501

You should see the Data Insights Dashboard running!

The app is running completely inside a container but accessible through your browser.

5. Explore the dashboard

Try these features:

  • View the sample dataset

  • Check statistical summaries

  • Create distribution plots

  • Compare numeric columns

  • View correlation heatmap

  • Filter data with the slider

  • Scroll down to see Container Introspection - the app shows it’s aware it’s running in a container!

The Container Introspection section is particularly cool - it displays:

  • The container’s unique ID (hostname)

  • The app’s process ID (typically PID 1 in containers)

  • Process tree showing all processes in the container’s namespace

  • Environment variables proving isolation

  • A visual “You Are Here” diagram

This demonstrates that containers are just isolated Linux processes with their own namespaces!

6. Load your own data (optional)

You can upload a CSV file using the sidebar uploader, or mount data from your host system.

To mount external data, stop the container (Ctrl+C) and restart with a volume:

docker run --rm -p 8501:8501 \
  -v /path/to/your/data:/data \
  streamlit-dashboard

docker run --rm -p 8501:8501 `
  -v C:/path/to/your/data:/data `
  streamlit-dashboard

docker run --rm -p 8501:8501 ^
  -v C:\path\to\your\data:/data ^
  streamlit-dashboard

Note: On Windows, use forward slashes in the container path and include the drive letter in the host path.

Then modify the app to read from /data/your-file.csv.

7. Run on a different port

Stop the container (Ctrl+C) and try running on a different port:

docker run --rm -p 8080:8501 streamlit-dashboard

Now access it at http://localhost:8080. Notice:

  • Container still uses port 8501 internally

  • Host port 8080 maps to container port 8501

  • Multiple instances can run on different host ports

8. Run in detached mode

Run the container in the background:

docker run --rm -d -p 8501:8501 --name my-dashboard streamlit-dashboard

New flags:

  • -d: Detached mode (runs in background)

  • --name my-dashboard: Give the container a friendly name

Access the dashboard at http://localhost:8501, then check it’s running:

docker ps

View logs:

docker logs my-dashboard

Follow logs in real-time:

docker logs -f my-dashboard

Stop it when done:

docker stop my-dashboard

Key concepts

  • Port mapping: Exposing containerized applications to your host machine

  • Web application containers: Running interactive apps in isolation

  • Environment variables: Configuring containers at runtime

  • Detached mode: Running containers in the background

  • Container naming: Managing multiple containers easily

Use cases for ML/data science

This pattern is perfect for:

  • Model demos: Quickly share model predictions with stakeholders

  • Data exploration: Distribute analysis dashboards to your team

  • ML model monitoring: Build dashboards showing model performance

  • Experiment tracking: Visualize training metrics

  • Data validation: Interactive tools for checking data quality

Experiment further

  1. Modify the dashboard: Edit app.py to add new visualizations

  2. Rebuild and see changes: Rebuild the image and restart the container

  3. Link to example 1: Mount the cleaned data from the first example

  4. Multiple instances: Run the same container on ports 8501, 8502, 8503 simultaneously

What’s next?

In Lab 3: ML development container, you’ll build a complete development environment container, customize it for ML work, publish it to Docker Hub, and launch it in GitHub Codespaces!

—

Common issues:

  • Port already in use: Change the host port: -p 8502:8501

  • Browser doesn’t load: Wait 5-10 seconds for Streamlit to start, check docker logs

  • Container exits immediately: Check logs with docker logs <container-id>