You can generate a Dashboard App in the Developer Playground. The Dashboard App wires multiple frontend components together into single app. It setups all the structure and configuration to work with Cube.js Backend, while giving you full control to customize it however you want.
The main purpose of the Dashboard App is to easily get the project up and running, while keeping it fully customizable. Since it is just a frontend app it is easy to embed into an existing architecture or deploy to any static website hosting.
Currently Dashboard App is generated based on React JS library and Ant Design UI framework. If you'd like to see more options with different JS and CSS frameworks please open a Github issue or ping us in Slack.
Dashboard App is generated in the
dashboard-app folder within your project
folder. To start the app you either navigate to the "Dashboard App" tab in the
playground and click "Start dashboard app" or run
$ npm run start in
your-project-folder/dashboard-app folder. Dashboard App runs on
You can access it directly by going to
http://localhost:3000 or inside the Playground under
the "Dashboard App" tab.
Dashboard App uses Cube.js backend to power the query builder and the dashboard. It also uses Apollo GraphQL with local storage to save meta data such as dashboard items titles and locations on the dashboard. You can easily switch from local storage to your own or hosted GraphQL backend.
npm run build creates a build directory with a production build of your
dashboard app. There a lot of options to deploy your static applications. You
can serve it with your favorite HTTP server ot just select one of the popular
cloud providers. Below you can find quick guides for
Netlify and Vercel. Also, you
can refer to the
guide for additional deployment options.
Install Netlify CLI:
$ npm install netlify-cli -g
Then build and deploy your Dashboard App:
$ cd my-cubejs-app/dashboard-app $ npm run build $ netlify deploy
Next follow command line prompts and choose yes for new project and
your deploy folder.
Install Vercel CLI:
$ npm install vercel -g
vercel command in the root directory of the app.
$ cd my-cubejs-app/dashboard-app $ vercel
Did you find this page useful?