Hi there,
I’ve found out that there is a feature Dash has supported since version 0.22.0. But there is no follow-up to the related posts in the forum.
plotly:master ← plotly:assets-index-customizations
opened 05:28PM - 11 Jul 18 UTC
## Assets includes & index customization
Solution for #265 Proposal for Offli… ne CSS and JS and Customizable `index.html`
#### 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:
```python
import dash
app = dash.Dash()
# default values
app.config.assets_folder = 'assets' # The path to the assets folder.
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
app.config.assets_url_path = '/assets' # the local url prefix ie `/assets/*.js`
```
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 = False`
- `app.config.assets_external` to your base host url, ie `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:
```python
import dash
metas = [
{'name': 'description', 'content': 'My description'}
]
app = dash.Dash(meta_tags=metas)
# alternatively
app.add_meta_tag({'http-equiv': 'X-UA-Compatible', 'content': 'IE=edge'})
```
##### Customizing the index
Add an `index_string` to change the default index dash use.
```python
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.
{%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.
```
Also added `interpolate_index` method on Dash, override it to get the context values of the index before rendering.
```python
import dash
class CustomDash(dash.Dash):
def interpolate_index(self,
metas, title, css, config,
scripts, app_entry, favicon):
return '''
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<div id="custom-header">My custom header</div>
{}
{}
<div id="custom-footer">My custom footer</div>
</body>
</html>
'''.format(app_entry, scripts)
```
I added tests for the meta keys and index customization. For the assets, I made a test in an external project to test if the files are included in that project, @plotly/dash I need help to integrate that test to run with the other tests.
We can add meta tags like this.
app = dash.Dash(meta_tags=[
{'name': 'description', 'content': 'My description'},
{'http-equiv': 'X-UA-Compatible', 'content': 'IE=edge'}
])
So I went here and the website helped me generate a set of meta tags.
meta_tags = [
dict(
name="description",
content=
"This is a 2022 replica of dash-svm. I used dash's recent new components and new features, and I've added new page elements."
),
...
app = Dash(__name__,
title='Support Vector Machine Explorer',
meta_tags=meta_tags)
Then the forum can help me automatically generate a preview.
You can also check the OP here .
This is one of two protocols currently supported by the forum, the Open Graph protocol.
The other is oEmbed, which requires a link tag in the header. Also, need an API to return JSON or XML. Those who are interested can try it out.
Hope this helps you. XD
