https://github.com/cube-js/cube-playground-templates
https://github.com/cube-js/cube-playground-templates
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/cube-js/cube-playground-templates
- Owner: cube-js
- Created: 2020-07-10T19:14:41.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T12:22:52.000Z (over 2 years ago)
- Last Synced: 2025-04-09T15:51:39.286Z (2 months ago)
- Language: JavaScript
- Size: 459 KB
- Stars: 14
- Watchers: 18
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[Website](https://cube.dev) • [Docs](https://cube.dev/docs) • [Examples](#examples) • [Blog](https://cube.dev/blog) • [Slack](https://slack.cube.dev) • [Twitter](https://twitter.com/thecubejs)
# Cube.js Playground Templates
This repository contains the templates used by the Cube Playground to scaffold various Dashboard Apps.
## Contributing
You can contribute to this repository by creating new templates or extending the existing ones.
### Structure overview
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.
### Packages
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:
```json
{
"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:
```json
{
"name": "react-antd-dynamic",
"version": "0.0.1",
"installsTo": {
"react-ui-framework": "0.0.1"
},
"receives": {}
}
```
### Templates
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](https://cube.dev/docs/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.
```json
{
"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"
}
```
### Development & Testing
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:
1. run the server using the `TEST_TEMPLATES` env variable
```bash
TEST_TEMPLATES=true yarn start
```
2. create a `.tmp` folder, where the `cubejs-playground-templates` will be stored
```bash
mkdir /Users/username/Projects/cubejs-app/node_modules/.tmp
```
3. create a symlink to the local repository
```bash
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.