Hello,
I’ve been working on a project where I’m integrating a Panel dashboard (hosted at 127.0.0.1:7000) into a FastAPI web application (accessible at 127.0.0.1:8000). An essential feature of this application is user authentication via Google OAuth. My initial implementation didn’t involve any HTML files, but with the introduction of the OAuth login, I’ve incorporated HTML rendering.
However, I’ve encountered a stumbling block: my app relies on Bokeh version 3.1.1, but starting from this version, the bokeh.min.css file seems to be missing. This absence has disrupted the rendering of my Panel app, leading to several CSS-related issues.
Context:
- Bokeh version: 3.1.1 and subsequent versions.
- Panel version: 1.1.0
- Integration: FastAPI with Google OAuth.
- Errors: included as screenshots
I made several attempts to locate the bokeh.min.css file in versions 3.1.1, 3.2.0, 3.2.1, and 3.2.2, but to no avail.
I’ve also sought insights from the Bokeh Discourse forum on this matter.
Questions:
- Has anyone else faced rendering issues in Panel apps, especially when integrating with authentication systems like Google OAuth, due to the absence of the bokeh.min.css file in recent Bokeh versions?
- Are there any known workarounds, solutions, or alternative approaches to seamlessly integrate Panel, FastAPI, and Google OAuth?
- Is there a specific version of Bokeh where the bokeh.min.css file is present and which is compatible with Panel?
Your insights and suggestions will be invaluable for my project. Thank you in advance!
Code structure for reference:
import os
from fastapi import FastAPI, Request, HTTPException
from authlib.integrations.starlette_client import OAuth
from starlette.middleware.sessions import SessionMiddleware
from fastapi.templating import Jinja2Templates
from fastapi.responses import RedirectResponse
from bokeh.embed import server_document
import panel as pn
# Load environment variables
YOUR_OAUTH_ID = "YOUR_OAUTH_ID_HERE"
YOUR_OAUTH_SECRET = "YOUR_OAUTH_SECRET_HERE"
oauth = OAuth()
oauth.register(
name='google',
client_id=YOUR_OAUTH_ID,
client_secret=YOUR_OAUTH_SECRET,
server_metadata_url='https://accounts.google.com/.well-known/openid-configuration',
redirect_uri='YOUR_REDIRECT_URI',
client_kwargs={'scope': 'openid profile email'},
)
app = FastAPI()
app.add_middleware(SessionMiddleware, secret_key="YOUR_SECRET_KEY")
templates = Jinja2Templates(directory="templates")
@app.get("/login")
async def login(request: Request):
redirect_uri = request.url_for('auth')
return await oauth.google.authorize_redirect(request, redirect_uri)
@app.get("/oauth-callback")
async def auth(request: Request):
# Handling OAuth token and redirection logic here
@app.get("/")
async def dashboard(request: Request):
script = server_document('YOUR_BOKEH_SERVER_ADDRESS')
return templates.TemplateResponse("base.html", {"request": request, "script": script})
pn.serve({'/': YOUR_PANEL_APP_FUNCTION}, address=YOUR_ADDRESS, show=False)
Note: This is trimmed version of the code focuses on the main integration parts without getting lost in the details.