Embedding a bokeh app in flask

The other answer does not describe how to embed a Bokeh server app (it uses components to embed a standalone Bokeh document).

First, you can see lots of live examples hosted at: https://demo.bokeh.org/

For embedding apps there are two usual options:

• iframes (works fine), or
• server_document

The latter is usually used like this:

from bokeh.embed import server_documentscript = server_document("https://demo.bokeh.org/sliders")

This will return a <script> tag similar to the one below, that you can put in your flask HTML response, wherever you'd like the app to appear:

<script    src="https://demo.bokeh.org/sliders/autoload.js?bokeh-autoload-element=1000&bokeh-app-path=/sliders&bokeh-absolute-url=https://demo.bokeh.org/sliders"    id="1000"></script>

Lastly, it's important to note that by default the Bokeh server opts for a fairly conservative network configuration. You'll need to start the Bokeh server with --allow-websocket-origin command line option set to be whatever host you are embedding the bokeh app into.

EDIT by one one of the core developers of the Bokeh project The information below does not answer the question above. It is categorically impossibly to embed a Bokeh Application by using bokeh.embed.components as described below. components is only capable of embedding standalone documenents (i.e. that do NOT run on a Bokeh server)

An example of embedding bokeh with flask is present on the bokeh github repo.

import flaskfrom bokeh.embed import componentsfrom bokeh.plotting import figurefrom bokeh.resources import INLINEfrom bokeh.templates import RESOURCESfrom bokeh.util.string import encode_utf8app = flask.Flask(__name__)colors = {    'Black': '#000000',    'Red':   '#FF0000',    'Green': '#00FF00',    'Blue':  '#0000FF',}def getitem(obj, item, default):    if item not in obj:        return default    else:        return obj[item]@app.route("/")def polynomial():    """ Very simple embedding of a polynomial chart"""    # Grab the inputs arguments from the URL    # This is automated by the button    args = flask.request.args    # Get all the form arguments in the url with defaults    color = colors[getitem(args, 'color', 'Black')]    _from = int(getitem(args, '_from', 0))    to = int(getitem(args, 'to', 10))    # Create a polynomial line graph    x = list(range(_from, to + 1))    fig = figure(title="Polynomial")    fig.line(x, [i ** 2 for i in x], color=color, line_width=2)    # Configure resources to include BokehJS inline in the document.    # For more details see:    #   http://docs.bokeh.org/en/latest/docs/reference/resources_embedding.html#module-bokeh.resources    plot_resources = RESOURCES.render(        js_raw=INLINE.js_raw,        css_raw=INLINE.css_raw,        js_files=INLINE.js_files,        css_files=INLINE.css_files,    )    # For more details see:    #   http://docs.bokeh.org/en/latest/docs/user_guide/embedding.html#components    script, div = components(fig, INLINE)    html = flask.render_template(        'embed.html',        plot_script=script, plot_div=div, plot_resources=plot_resources,        color=color, _from=_from, to=to    )    return encode_utf8(html)def main():    app.debug = True    app.run()if __name__ == "__main__":    main()

Another idea would be to run bokeh-server and your flask web app side-by-side, and load the bokeh-code that way (server-side or via JS or an iframe), but that could be troublesome.