How to include JavaScript assets in a Dash Python library and serve them automatically?

Dash Python
,
1

Context
I’ve created a Dash Python library (my-dash-component) that includes a JavaScript file that needs to be executed by the Dash app when users install and use my library. I’m using Poetry for package management and want to distribute this via PyPI.

Current project structure:

├── src
│   └── my-dash-component
│       ├── __init__.py
│       ├── assets
│       │   └── interceptor.js  # This JS needs to be available to users
│       └── my-dash-component.py
├── pyproject.toml
└── ...

My pyproject.toml:

toml[tool.poetry]
name = "my-dash-component"
version = "0.3.5"
description = "...."
packages = [{include = "my-dash-component", from = "src"}]

[tool.poetry.dependencies]
python = ">=3.9"
dash-auth = "^2.3.0"

The Problem
I want users to be able to simply do pip install my-dash-component and have the JavaScript automatically available in their Dash app without manual file copying.
Currently, I’ve tried:

from my_dash_component import ASSETS_PATH as COMP_ASSETS_PATH

app = dash.Dash(
    __name__, 
    use_pages=True, 
    assets_folder=[ASSETS_DIR, COMP_ASSETS_PATH]  # This fails - list not supported
)

But I get a type error because assets_folder expects a string, not a list.

Questions

  • What’s the recommended/idiomatic way to package JavaScript assets in a Dash Python library? Should I be using the assets folder approach, or is there a better pattern?
  • How can I serve JavaScript from my library automatically without requiring users to manually copy files? I want a seamless experience where pip install mydashcomponent makes the JS immediately available.
  • Does Dash have built-in support for multiple asset directories, or do I need to implement a workaround? I’ve seen some suggestions about extending the Dash class, but wondering if there’s an official approach.
  • Is there a way to inject JavaScript programmatically into a Dash app from within a Python library? Something like adding scripts to the app’s index template automatically when my library is imported?

What I’ve Tried

  1. Adding include = [“src/my_dash_component/assets/**/*”] to pyproject.toml to package the assets
  2. Exposing the assets path via ASSETS_PATH in my init.py
  3. Attempting to use multiple asset folders (which doesn’t work)

Ideal User Experience
I’d love for users to be able to do something like:

import dash
from my_dash_component import setup_component  # or similar
app = dash.Dash(__name__)
setup_auth(app)  # This would make the JS available automatically

Or even just importing the library would make the assets available without any additional setup.

Has anyone solved this problem before? What’s the best practice for distributing Dash components/libraries that include both Python and JavaScript code?

Thanks for any guidance!

2

Hello @cfloressuazo,

You can check my repo dash-yada for how I achieve this. It loads it as a part of the component suite, not assets.

1 Like