In the previous chapter, we installed all the tools necessary for creating Dash components. In this chapter, we will create a new project out of the Dash Component Boilerplate. We’ll give an overview of the folder structure and the files created, and show a workflow that you can use to develop new components. Note that the boilerplate is updated periodically, so use this tutorial as a guideline only and be sure to check GitHub for the latest information.
All the component libraries in Dash, such as dash-core-components, dash-html-components, etc. use the same toolkit and its made available to you in the Dash Component Boilerplate.
We had already installed the cookiecutter library in the previous chapter. We will use that to create our own project now.
cookiecutter gh:plotly/dash-component-boilerplate
This command will bring the template from GitHub and prompt you to enter some details about your component. Answer the questions about the project:
project_name |
A display name for the project, can contain spaces and uppercase letters, for example Example Component. |
|---|---|
project_shortname |
A variable derived from project_name without spaces and all lowercase letters. |
component_name |
Derived from project without spaces and -, it will be the default component class name and as such should be PascalCase for naming. |
author_name / author_email |
Your name/email to be included in package.json and setup.py. |
description |
A short description for the project. |
license |
Choose a license from the list. |
publish_on_npm |
Set to False if you don't want to publish on npm. In that case, your component will always be loaded locally. |
install_dependencies |
Install the npm packages and requirements.txt and build the initial component so it's ready for a spin. |
For this demo, the project_name is set to Dash Custom Component , all other options contain default values with the exception of the author_name and author_email; excluding these values will result in an error. The component name is set to DashCustomComponent by default, but you can provide your own name.
project_name [my dash component]: Dash Custom Component
project_shortname [dash_custom_component]:
component_name [DashCustomComponent]:
jl_prefix []:
r_prefix []:
author_name [Enter your first and last name (For package.json)]: John Doe
author_email [Enter your email (For package.json)]: [email protected]
github_org []: johndoe
description [Project Description]: My first custom Dash component
Select use_async:
1 - False
2 - True
Choose from 1, 2 [1]:
Select license:
1 - MIT License
2 - BSD License
3 - ISC License
4 - Apache Software License 2.0
5 - GNU General Public License v3
6 - Not open source
Choose from 1, 2, 3, 4, 5, 6 [1]:
publish_on_npm [True]:
install_dependencies [True]:
You will also see this message in the process:
use_async
False
use_async is set to False, your component will not be lazy loaded and fragments will not be created.
This message is expected if you use the default setting for use_async, which is False. If you select True, then it will create a project structure that splits the code into smaller pieces and allows for “lazy loading”. This can improve app performance by loading just the things that are currently needed by the user. This can be added later if necessary, but for now it’s not needed.
The cookiecutter command will also install the dependencies which include both the python packages as well as the node modules.
Once the installation has been done and you see the below message in the end, we can move forward.
dash_custom_component ready!
This process will create a folder with the name that you had supplied in the project_name field which in this case will be dash_custom_component.
Several files and folders have been created within the dash_custom_component folder. Let’s go through some of the important ones.
.
├── README.md
├── dash_custom_component
├── package.json
├── setup.py
├── src/lib
├── tests
└── venv