Dashboard App

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.

Overview

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 3000 port. 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.

Customization Guides

• Dynamic React Dashboard
• Real Time Dashboard

Deployment

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 create-react-app deployment guide for additional deployment options.

Netlify

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 build as your deploy folder.

Vercel

Install Vercel CLI:

$ npm install vercel -g

Run vercel command in the root directory of the app.

$ cd my-cubejs-app/dashboard-app
$ vercel