FastAPI integration#

Panel usually runs on a Bokeh-Server, which in turn runs on Tornado. However, it is also often useful to embed a Panel app into a large web application, such as a FastAPI web server. Integration with FastAPI is easier compared to others such as Flask, as it is a more lightweight framework. Using Panel with FastAPI requires only a little more effort than notebooks and Bokeh servers.

Configuration#

Before we start adding a Bokeh application to our FastApi server, we need to set up some of the basic configuration in fastAPI/main.py:

First, we import all the necessary elements:

fastAPI/main.py#

import panel as pn

from bokeh.embed import server_document

from fastapi import FastAPI, Request
from fastapi.templating import Jinja2Templates

Next, we define app as an instance of FastAPI and define the path to the template directory:
```
10app = FastAPI()
11templates = Jinja2Templates(directory="templates")
```

Now we create our first routine via an asynchronous function and refer it to our BokehServer:

@app.get("/")
async def bkapp_page(request: Request):
    script = server_document("http://127.0.0.1:5000/app")
    return templates.TemplateResponse(
        "base.html", {"request": request, "script": script}
    )

As you can see from the code, a Jinja2 template fastAPI/templates/base.html is expected. This can have the following content, for example:

fastAPI/templates/base.html#

<!DOCTYPE html>
<html>
    <head>
        <title>Panel in FastAPI: sliders</title>
    </head>
    <body>
        {{ script|safe }}
    </body>
</html>

Let’s now return to our fastAPI/main.py file to start our bokeh server with pn.serve():
```
22pn.serve(
23    {"/app": createApp},
24    address="127.0.0.1",
25    port=5000,
26    show=False,
27    allow_websocket_origin=["127.0.0.1:8000"],
28)
```
createApp
calls up our panel app in this example, but this is not covered until the next section.

address, port
Address and port at which the server listens for requests; in our case http://127.0.0.1:5000.

show=False
ensures that the Bokeh server is started but is not immediately displayed in the browser.

allow_websocket_origin
lists the hosts that can connect to the websocket. In our example, this should be fastApi, so we use 127.0.0.1:8000.

Now we define the sliders app based on a standard template for FastAPI apps, which shows how Panel and FastAPI can be integrated:

fastAPI/sliders/sinewave.py

a parameterised object that represents your existing code:

fastAPI/sliders/sinewave.py#

import numpy as np
import param

from bokeh.models import ColumnDataSource
from bokeh.plotting import figure


class SineWave(param.Parameterized):
    offset = param.Number(default=0.0, bounds=(-5.0, 5.0))
    amplitude = param.Number(default=1.0, bounds=(-5.0, 5.0))
    phase = param.Number(default=0.0, bounds=(0.0, 2 * np.pi))
    frequency = param.Number(default=1.0, bounds=(0.1, 5.1))
    N = param.Integer(default=200, bounds=(0, None))
    x_range = param.Range(default=(0, 4 * np.pi), bounds=(0, 4 * np.pi))
    y_range = param.Range(default=(-2.5, 2.5), bounds=(-10, 10))

    def __init__(self, **params):
        super(SineWave, self).__init__(**params)
        x, y = self.sine()
        self.cds = ColumnDataSource(data=dict(x=x, y=y))
        self.plot = figure(
            height=400,
            width=400,
            tools="crosshair, pan, reset, save, wheel_zoom",
            x_range=self.x_range,
            y_range=self.y_range,
        )
        self.plot.line("x", "y", source=self.cds, line_width=3, line_alpha=0.6)

    @param.depends(
        "N",
        "frequency",
        "amplitude",
        "offset",
        "phase",
        "x_range",
        "y_range",
        watch=True,
    )
    def update_plot(self):
        x, y = self.sine()
        self.cds.data = dict(x=x, y=y)
        self.plot.x_range.start, self.plot.x_range.end = self.x_range
        self.plot.y_range.start, self.plot.y_range.end = self.y_range

    def sine(self):
        x = np.linspace(0, 4 * np.pi, self.N)
        y = (
            self.amplitude * np.sin(self.frequency * x + self.phase)
            + self.offset
        )
        return x, y

fastAPI/sliders/pn_app.py

creates an app function from the SineWave class:

fastAPI/sliders/pn_app.py#

import panel as pn

from .sinewave import SineWave


def createApp():
    sw = SineWave()
    return pn.Row(sw.param, sw.plot).servable()

Finally, we return to our fastAPI/main.py and import the createApp function:
fastAPI/main.py#
```
4from sliders.pn_app import createApp
```

The file structure should now look like this:

fastAPI
├── main.py
├── sliders
│   ├── pn_app.py
│   └── sinewave.py
└── templates
    └── base.html

You can now start the server with:

$ bin/uvicorn main:app --reload
INFO:     Will watch for changes in these directories: ['/srv/jupyter/jupyter-tutorial/docs/web/dashboards/panel/fastAPI']
INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
INFO:     Started reloader process [218214] using StatReload
Launching server at http://127.0.0.1:5000
INFO:     Started server process [218216]
INFO:     Waiting for application startup.
INFO:     Application startup complete.

You should then see the following in your web browser under the URL http://127.0.0.1:8000: