Website • Docs • Examples • Blog • Slack • Twitter
This repository contains the templates used by the Cube Playground to scaffold various Dashboard Apps.
You can contribute to this repository by creating new templates or extending the existing ones.
To better understand the structure, you can look at the manifest.json
file containing the information about templates and packages. It also describes the way these components interact with each other.
Each package contains the information on where it can be installed to (installsTo
) and what it can receive (receives
).
For example, a root package may look like this:
{
"name": "create-react-app",
"version": "0.0.1",
"installsTo": null,
"receives": {
"react-ui-framework": "0.0.1"
}
}
The installsTo
and receives
fields represent interfaces. That means that the concrete package implementation (e.g., create-react-app
) can receive any package that can be installed to the react-ui-framework
interface.
For example:
{
"name": "react-antd-dynamic",
"version": "0.0.1",
"installsTo": {
"react-ui-framework": "0.0.1"
},
"receives": {}
}
Each template contains the comprehensive information required for template installation. The following fields name
, description
and coverUrl
will be used to display the template in the Cube Playground on the Dashboard App page.
The templatePackages
field describes all the packages the template consists of. During template installation, all packages defined in templatePackages
will be downloaded and resolved accordingly.
{
"name": "Dynamic Dashboard with React, AntD, and Recharts",
"description": "Use this template to create a dynamic dashboard application with React, AntD, and Chart.js. It comes with a dynamic query builder and Apollo GraphQL client. Use it when you want to allow users to edit dashboards.",
"coverUrl": "https://cube.dev/downloads/template-react-dashboard.png",
"templatePackages": [
"create-react-app",
"react-antd-dynamic",
"react-credentials",
"recharts-charts",
"antd-tables"
],
"version": "0.0.1"
}
In production, the manifest.json
file, along with all the packages, are fetched from the https://github.com/cube-js/cubejs-playground-templates master branch.
You can avoid this behavior and make the server
"fetch" those packages from a local folder. To do so, go through the next steps:
- run the server using the
TEST_TEMPLATES
env variable
TEST_TEMPLATES=true yarn start
- create a
.tmp
folder, where thecubejs-playground-templates
will be stored
mkdir /Users/username/Projects/cubejs-app/node_modules/.tmp
- create a symlink to the local repository
ln -s /Users/username/Projects/cubejs-playground-templates /Users/username/Projects/cubejs-app/node_modules/.tmp/cubejs-playground-templates
Now, when you open the templates gallery in the Playground (by default at http://localhost:4000/#/template-gallery), you'll see the templates you're developing locally.