Hi all, I’m using FastAPI framework as my main application and I want to integrate panel application with it in the same port. For eg, If my main (FastAPI) application runs in port 8000, the Panel application also should run on 8000. Because I hosted my main (FastAPI) application in Azure App services which enables 80 and 443 by default. I can not add a new port to that.
I use this command to start my main(FastAPI) application - poetry run uvicorn app.main:app --reload
Whenever I click on Panel application menu (from base.html), it should render panel application in the same port.
pl_serv.py
plot_app = FastAPI()
# Middleware to handle trusted hosts
plot_app.add_middleware(TrustedHostMiddleware, allowed_hosts=["# Respective hosts"])
def create_app():
pn.extension("bokeh")
pn.extension("tabulator")
data = # from source
return create_panel(data, standalone_app=False).servable()
# Serve the Panel app using WSGIMiddleware
panel_app = pn.serve(
{"/app": create_app},
allow_websocket_origin=["Respective origins"],
address="0.0.0.0",
port=0, # Use port 0 to avoid binding to a specific port
show=False,
threaded=True,
static_dirs={"assets": "path to static")},
)
plot_app.mount("/panel", WSGIMiddleware(panel_app))
@plot_app.get("/panel")
async def panel_page(request: Request):
return RedirectResponse(url="/panel/app")
@plot_app.get("/plot")
async def plot_page(request: Request):
try:
script = server_document(f"http://{request.url.hostname}/panel/app")
return templates.TemplateResponse(request, "pl.html", {"script": script})
except Exception:
return templates.TemplateResponse(request, "error.html", {"error": "Could not load plot page."})
@plot_app.get("/logout")
async def logout():
return RedirectResponse(url="/")
@plot_app.get("/")
async def main_app():
return RedirectResponse(url="/panel/plot")
main(FastAPI) application - main.py:
from fastapi import FastAPI
from app.ui.plot_service import plot_app
app = FastAPI()
# Mount the plot_app to serve the Panel application
app.mount("/panel", plot_app)
# Other routes and middleware configurations...
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Application</title>
<link rel="stylesheet" href="/static/styles.css">
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/panel">Panel application</a></li>
<!-- Other menu items -->
</ul>
</nav>
<div id="content">
{% block content %}{% endblock %}
</div>
</body>
</html>
pl.html
{% extends "base.html" %}
<head>
{% block title %}Renewable{% endblock %}
</head>
{% block extra_script %}
{{ script|safe }}
{% endblock %}
Despite these changes, I am still getting the following error:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/panel/app/autoload.js?bokeh-autoload-element=e9d9f7a5-a22f-4170-8f3a-32c59e1c72f3&bokeh-app-path=/panel/app&bokeh-absolute-url=http://localhost/panel/app
How can I resolve this issue and serve the Panel app on the same port as the FastAPI app without encountering the net::ERR_CONNECTION_REFUSED error?