Black Lives Matter. Please consider donating to Black Girls Code today.

How can i use my html file in dash?

I use dash to create an app in order to show some graph,and I want to use custom HTML and CSS.How can I put them in my app?

While it is not exposed as part of official API, you can quite elegantly implement it using basic Python inheritance like this:

class MyDashApp(dash.Dash):
    def index(self, *args, **kwargs):
        scripts = self._generate_scripts_html()
        css = self._generate_css_dist_html()
        config = self._generate_config_html()
        title = getattr(self, 'title', PAGE_TITLE)
        html = load_my_html_template()
        return html.format(
            title=title,
            css=css,
            config=config,
            scripts=scripts
        )
app = MyDashApp(..)
2 Likes

you can add a static folder to place html or img, and you can find them from the url.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, Event, State
from flask import Flask
import flask
import webbrowser
import os

STATIC_PATH = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'static')

server = Flask(__name__)
app = dash.Dash(name = __name__, server = server)

app.layout = html.Div( 
   html.Img(src='/static/your_img.jpeg') 
)

@app.server.route('/static/<resource>')
def serve_static(resource):
    return flask.send_from_directory(STATIC_PATH, resource)

if __name__ == '__main__':
    webbrowser.open('http://127.0.0.1:8050/', new=0, autoraise=True) 
    app.run_server(debug=True, use_reloader=False)

What’s the template format and the type of returned html in this line: html = load_my_html_template()?