Dash in Jupyter - more seamless jupyter notebook integration

This answer in forum provides this function to do this using iframe:

from IPython import display
def show_app(app,  # type: dash.Dash
             port=9999,
             width=700,
             height=350,
             offline=True,
             style=True,
             **dash_flask_kwargs):
    """
    Run the application inside a Jupyter notebook and show an iframe with it
    :param app:
    :param port:
    :param width:
    :param height:
    :param offline:
    :return:
    """
    url = 'http://localhost:%d' % port
    iframe = '<iframe src="{url}" width={width} height={height}></iframe>'.format(url=url,
                                                                                  width=width,
                                                                                  height=height)
    display.display_html(iframe, raw=True)
    if offline:
        app.css.config.serve_locally = True
        app.scripts.config.serve_locally = True
    if style:
        external_css = ["https://fonts.googleapis.com/css?family=Raleway:400,300,600",
                        "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
                        "http://getbootstrap.com/dist/css/bootstrap.min.css", ]

        for css in external_css:
            app.css.append_css({"external_url": css})

        external_js = ["https://code.jquery.com/jquery-3.2.1.min.js",
                       "https://cdn.rawgit.com/plotly/dash-app-stylesheets/a3401de132a6d0b652ba11548736b1d1e80aa10d/dash-goldman-sachs-report-js.js",
                       "http://getbootstrap.com/dist/js/bootstrap.min.js"]

        for js in external_js:
            app.scripts.append_script({"external_url": js})

    return app.run_server(debug=False,  # needs to be false in Jupyter
                          port=port,
                          **dash_flask_kwargs)

This question on Stack Overflow provides further evidence of interest in this feature. So, I’m posting this here both as feature request and as a reference. Feel free to close this issue if you are already aware of this.

[chriddyp]

We’re experimenting with a lightweight JupyterLab extension that:

• renders the Dash app in a JupyterLab tab as an iframe.
• runs the app in a separate process/thread to prevent the run_server call from blocking the kernel. It detects when the app has changed and then restarts the dash app.

One of the nice things about developing in Jupyter is that the data pre-processing steps are sort of “cached” in the initial cells. So, you can preserve a single cell for your app.layout and iterate pretty quickly.

We’ll keep this thread updated with our progress

[chriddyp]

We have open sourced this extension in this repo: https://github.com/plotly/jupyterlab-dash 🎉