DEV Community

Cover image for 📊 Other Dashboard Tools: Streamlit, Dash, and Bokeh (with deploy and CI/CD)
Walter Emmanuel Salas Jimenez
Walter Emmanuel Salas Jimenez

Posted on

📊 Other Dashboard Tools: Streamlit, Dash, and Bokeh (with deploy and CI/CD)

#programming #beginners #devops #discuss

Quick Summary: In this practical article in Spanish, you'll see three popular alternatives for creating dashboards and reports in Python — Streamlit, Dash y Bokeh — with ready-to-run code examples, step-by-step deployment instructions (including CI/CD with GitHub Actions), a short guide for publishing on Dev.to, and an English script for your presentation video (≤5 min). 🚀

🧭 Índice

  1. Why use these tools?
  2. Streamlit — mini example + simple deploy
  3. Dash (Plotly) — example, Docker and CI/CD to Cloud Run
  4. Bokeh — example and deployment notes (websockets)
  5. Repo structure and requirements.txt
  6. GitHub Actions: pipeline (tests → build → deploy)

1) Why use these tools? 🤔

  • Streamlit: ultra-fast for interactive prototypes and demos. Ideal for data scientists. ✅
  • Dash: powerful when you need complex components and fine control (Plotly + Flask). 👍
  • Bokeh: very good for interactive visualizations and apps that require a server (Bokeh Server). 🏗️

Each tool has trade-offs in ease vs control vs scalability — in this article you'll see minimal examples and how to get them to the cloud.

2) Streamlit — minimal example

Archivo: streamlit_app.py

# streamlit_app.py
import streamlit as st
import pandas as pd
import altair as alt

st.title('Demo: Streamlit - Sales')

df = pd.DataFrame({
    'category': ['A', 'B', 'C', 'A', 'B', 'C'],
    'sales': [10, 15, 7, 12, 9, 20]
})

sel = st.selectbox('Select category', ['All'] + df['category'].unique().tolist())
if sel != 'All':
    df = df[df['category'] == sel]

chart = alt.Chart(df).mark_bar().encode(
    x='category',
    y='sales'
)

st.altair_chart(chart, use_container_width=True)
Enter fullscreen mode Exit fullscreen mode

Run locally:

pip install streamlit pandas altair
streamlit run streamlit_app.py
Enter fullscreen mode Exit fullscreen mode

Deployment tip: The fastest way is to use Streamlit Community Cloud (direct connection with GitHub: you upload your repo and deploy it from share.streamlit.io).

3) Dash (Plotly) — example + Docker + CI/CD (Cloud Run)

File: app.py

# app.py
import os
from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd

# Example data
df = pd.DataFrame({'x': [1, 2, 3, 4], 'y': [10, 5, 8, 12]})
fig = px.line(df, x='x', y='y', title='Dash Example')

app = Dash(__name__)
server = app.server  # exposes the WSGI app for Gunicorn

app.layout = html.Div([
    html.H1('Dash - Demo'),
    dcc.Graph(figure=fig)
])

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=int(os.environ.get('PORT', 8050)))
Enter fullscreen mode Exit fullscreen mode

requirements.txt (example):

dash
pandas
plotly
gunicorn
Enter fullscreen mode Exit fullscreen mode

Dockerfile (para Cloud Run u otros servicios) 

FROM python:3.11-slim
WORKDIR /app
COPY requirements.txt ./
RUN pip install --no-cache-dir -r requirements.txt
COPY . .
# Gunicorn runs the WSGI server exposed in `server`
CMD ["gunicorn", "--bind", ":$PORT", "--workers", "1", "--threads", "8", "--timeout", "0", "app:server"]
Enter fullscreen mode Exit fullscreen mode

GitHub Actions → Build & Deploy to Google Cloud Run

Save this workflow to .github/workflows/deploy-cloudrun.yml:

name: CI/CD - Cloud Run
on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Configure GCloud
        uses: google-github-actions/setup-gcloud@v1
        with:
          service_account_key: ${{ secrets.GCP_SA_KEY }}
          project_id: ${{ secrets.GCP_PROJECT_ID }}

      - name: Build and push image (Cloud Build)
        run: |
          gcloud builds submit --tag gcr.io/${{ secrets.GCP_PROJECT_ID }}/dash-app:$GITHUB_SHA

      - name: Deploy to Cloud Run
        uses: google-github-actions/deploy-cloudrun@v1
        with:
          service: dash-app
          image: gcr.io/${{ secrets.GCP_PROJECT_ID }}/dash-app:$GITHUB_SHA
          region: us-central1
Enter fullscreen mode Exit fullscreen mode

✅ What it does: On every push to main, the workflow builds the image, uploads it to Google Container Registry, and deploys a new revision to Cloud Run.

4) Bokeh — minimal example and deployment notes

File: main.py (Bokeh server)

# main.py
from bokeh.plotting import figure
from bokeh.io import curdoc

p = figure(title='Bokeh demo')
p.line([1, 2, 3, 4], [3, 7, 8, 5])

curdoc().add_root(p)
Enter fullscreen mode Exit fullscreen mode

Run locally (Bokeh server):

pip install bokeh
bokeh serve --show main.py
Enter fullscreen mode Exit fullscreen mode

Deployment notes:

  • Bokeh uses websockets (Bokeh Server). When deploying, ensure your service supports timeouts and websocket connections.
  • Typical strategy: create a Dockerfile with bokeh serve --port $PORT --allow-websocket-origin='*' main.py and deploy to Cloud Run (or similar).
  • If using Cloud Run, configure a higher timeout for long connections.

5) Recommended structure 

my-dashboard/
├─ streamlit_app.py
├─ app.py          # dash
├─ main.py         # bokeh
├─ requirements.txt
├─ Dockerfile      # for dash/bokeh if using container
└─ .github/
   └─ workflows/
      └─ deploy-cloudrun.yml
Enter fullscreen mode Exit fullscreen mode

6) GitHub Actions: suggested pipeline (details)

  1. Test → Run pytest or quick checks (flake8, mypy).
  2. Build → Build Docker image or run gcloud builds submit.
  3. Deploy → gcloud run deploy or use google-github-actions/deploy-cloudrun.

🔗 GitHub Repository

The full code with Streamlit, Dash, and Bokeh examples, along with the Dockerfile and CI/CD workflows with GitHub Actions, is available in the following repository:

👉 GitHub Repository: my-dashboard

Top comments (0)