Dash Component Boilerplate
This repository contains a Cookiecutter template to create your own Dash components.
- New to Dash? Check out the official Dash Documentations
- If it's the first time creating a Dash component, start with our React guide for Python developers
- Need help with your component? Create a post on the Dash Community Forum
Usage
To use this boilerplate:
- Install the requirements:
Node.js/npm is also required.
$ pip install cookiecutter $ pip install virtualenv
- Run cookiecutter on the boilerplate repo:
$ cookiecutter gh:plotly/dash-component-boilerplate
- Answer the questions about the project.
project_name
: This is the "human-readable" name of your project. For example, "Dash Core Components".project_shortname
: is derived from the project name, it is the name of the "Python library" for your project. By default, this is generated from yourproject_name
by lowercasing the name and replacing spaces &-
with underscores. For example, for "Dash Core Components" this would be "dash_core_components".component_name
: This is the name of the initial component that is generated. As a JavaScript class name it should be in PascalCase. defaults to the PascalCase version ofproject_shortname
.jl_prefix
: Optional prefix for Julia components. For example,dash_core_components
uses "dcc" so the Pythondcc.Input
becomesdccInput
in Julia, anddash_table
uses "dash" to makedashDataTable
.r_prefix
: Optional prefix for R components. For example,dash_core_components
uses "dcc" so the Pythondcc.Input
becomesdccInput
in R, anddash_table
uses "dash" to makedashDataTable
.author_name
andauthor_email
: for package.json and DESCRIPTION (for R) metadata.github_org
: If you plan to push this to GitHub, enter the organization or username that will own it (for URLs to the project homepage and bug report page)description
: the project description, included in package.json.license
: License type for the component library. Plotly recommends the MIT license, but you should read the generated LICENSE file carefully to make sure this is right for you.publish_on_npm
: Set to false to only serve locally from the package data.install_dependencies
: Set to false to only generate the project structure.
- The project will be generated in a folder named with your
project_shortname
. - Follow the directions in the generated README to start developing your new Dash component.
Installing the dependencies can take a long time. They will be installed in a
folder named venv
, created by virtualenv. This ensures that dash is installed
to generate the components in the build:backends
script of the generated
package.json
.
Advanced customization
Shared cache groups for async chunks
Shared async chunks for code that repeats across multiple async chunks is already supported through our custom webpack.config.js
optimizations. You can leverage it by manually the path of {{cookiecutter.project_shortname}}-shared.js
to _js_dist
inside {{cookiecutter.project_shortname}}/__init__.py
(as well as the associated external URL).
More Resources
- Found a bug or have a feature request? Create an issue
- Watch the component boilerplate repository to stay informed of changes to our components.
- To get a feel for what's involved in creating a component, read the README.md generated by this cookiecutter
- Want something more visual? Check out this asciinema of how to create a dash component from this boilerplate.
- Examples of Dash component libraries include: