Dash version 0.22.0 released!

Dash Python
1

Dash has been updated to version 0.22.0

Changelog

What’s new ?

Assets include

Dash will now look for a folder named assets on the current work directory, if one is found, it will walk that directory and include js and css files on the index.

Related configs:

import dash

app = dash.Dash()

# default values
app.config.include_asset_files = True   # Include the files in the asset folder
app.config.assets_external_path = ''    # The external prefix if serve_locally == False

Supported files:

  • .js, javascript files will be included after the components libs and before the dash-render.
  • .css, stylesheets will be included as a <link> in the head.
  • favicon.ico, include as a <link> in the head.

The files are included in alphabetic order.
The directories can be nested.

Advanced use:

To host your assets content externally:

  • set app.scripts.config.serve_locally and app.css.config.serve_locally to False.
  • set app.config.assets_external_path to your base host url, eg: http://bucket.s3.amazonaws.com/
  • app.config.include_asset_files must still be set to True for the files to be indexed by dash.
  • Duplicate the file structure in your assets folder to your file hoster and the files will be loaded from there instead.

Index customization

Meta tags

It is now possible to add meta tags to the index of dash.

Example:

import dash

app = dash.Dash(meta_tags=[
    {'name': 'description', 'content': 'My description'},
    {'http-equiv': 'X-UA-Compatible', 'content': 'IE=edge'}
])
Customizing the index

Add an index_string to change the default index dash use.

import dash

app = dash.Dash()
app.index_string = '''
<!DOCTYPE html>
<html>
    <head>
        {%metas%}
        <title>{%title%}</title>
        {%favicon%}
        {%css%}
    </head>
    <body>
        <div>My Custom header</div>
        {%app_entry%}
        <footer>
            {%config%}
            {%scripts%}
        </footer>
        <div>My Custom footer</div>
    </body>
</html>
'''

The {%key%}s will be formatted like in the default index.

Available keys:

{%metas%}        # optional - The registered meta tags.
{%favicon%}      # optional - A favicon link tag if found in `assets`.
{%css%}          # optional - link tags to css resources.
{%title%}        # optional - Page title.
{%config%}       # required - Config generated by dash for the renderer.
{%app_entry%}    # required - The container where dash react components are rendered.
{%scripts%}      # required - Collected dependencies scripts tags.

You can also override Dash.interpolate_index for more advanced use cases.

import dash

class CustomDash(dash.Dash):
    def interpolate_index(self, **kwargs):
        return '''
        <!DOCTYPE html>
        <html>
            <head>
                <title>My App</title>
            </head>
            <body>
                
                <div id="custom-header">My custom header</div>
                {app_entry}
                {config}
                {scripts}
                <div id="custom-footer">My custom footer</div>
            </body>
        </html>
        '''.format(
            app_entry=kwargs['app_entry'], 
            config=kwargs['config'],  
            scripts=kwargs['scripts'])
7 Likes
2

Thank you!

The great thing about meta tags, index_string, and interpolate_index is that Dash apps are now visible / discoverable by search engines. Very useful for search engine optimization.

Asset files: I’m assuming that now we can host scripts locally, without having to host them on different server? For example, we can put a Google Analytics code and don’t have to put it somewhere else?

Is there a way to integrate the app.layout with the app.index_string? I quickly tried a simple app, it works great, but the layout elements appear after the index string. I’d be interested to know how they might work together (having some dcc elements within the HTML markup for the index string).

for example:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(meta_tags=[
    {'name': 'description', 'content': 'My Description'},
])

app.title = 'This is the app title'

app.index_string = """
<!DOCTYPE html>
<html>
    <head>
        {%metas%}
        <title>{%title%}</title>
        {%favicon%}
        {%css%}
    </head>
    <body>
    Welcome to my app... 

    <a href="https://plot.ly/products/dash/">Checkout Dash!</a>
    
        {%app_entry%}
        <footer>
            {%config%}
            {%scripts%}
        </footer>
    </body>
</html>
"""

app.layout = html.Div([
    dcc.Dropdown(options=[{'label': x, 'value': x}
                          for x in list('ABCDE')])
])

if __name__ == '__main__':
    app.run_server()

Thanks!

1 Like
3

Asset files: I’m assuming that now we can host scripts locally, without having to host them on different server? For example, we can put a Google Analytics code and don’t have to put it somewhere else?

Yes, by default it will always load the assets locally, even while serve_locally = False if you don’t set app.config.assets_external_path.

Is there a way to integrate the app.layout with the app.index_string? I quickly tried a simple app, it works great, but the layout elements appear after the index string. I’d be interested to know how they might work together (having some dcc elements within the HTML markup for the index string).

You cannot mix both, they are from different worlds. The dash components are rendered dynamically using react residing in {%app_entry%} whereas the index_string is static content. If you want to include static content after the dash app layout, just put it after {%app_entry%}.

2 Likes
4

I have couple of available color pallets on my site, the app.callback changes the href value of corresponding html.Link when user picks another option. I would like to keep all my styles (default ones + colors defining) in single directory, it would be nice to have some way to define ignored files, of best regexp that will define ignored filename from the assets directory as in case like this including all styles in the <head> will not work.

5

Good idea, can you create an issue ?

6

These features are now officially documented in the Official Dash User Guide :tada:
https://dash.plot.ly/external-resources

1 Like
7

How can I specify my own local directory as an assets folder? Deploying the dash app on linux servers and the assets folder is being overwritten by our apache servers.

I/ve tried using assets_url_path, but can’t figure it out.

8

It’s assets_folder, starting with 0.35.3 and up the assets folder is a relative path from the app folder. Before it needed to be an absolute path.