|
| 1 | +--- |
| 2 | +title: Dashboard App |
| 3 | +permalink: /dashboard-app |
| 4 | +category: Cube.js Frontend |
| 5 | +menuOrder: 3 |
| 6 | +--- |
| 7 | + |
| 8 | +You can generate a Dashboard App in the Cube.js developer playground. The |
| 9 | +Dashboard App wires multiple frontend components together into single |
| 10 | +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. |
| 11 | + |
| 12 | +The main purpose of the Dashboard App is to easily get the project up and |
| 13 | +running, while keeping it fully customizable. Since it is just a frontend app it |
| 14 | +is easy to embed into an existing architecture or deploy to any static website hosting. |
| 15 | + |
| 16 | +_Currently Dashboard App is generated based on [React](https://reactjs.org/) JS library and [Ant Design](https://ant.design/) UI framework. If you'd like to see more options with |
| 17 | + different JS and CSS frameworks please [open a Github issue](https://github.com/cube-js/cube.js/issues/new?assignees=&labels=&template=feature_request.md&title=) or [ping us in |
| 18 | + Slack.](https://slack.cube.dev)_ |
| 19 | + |
| 20 | +## Overview |
| 21 | + |
| 22 | +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 `3050` port. You can access it directly by going to [http://localhost:3050](http://localhost:3050) or inside the playground under the "Dashboard App" tab. |
| 23 | + |
| 24 | +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. |
| 25 | + |
| 26 | +## Deployment |
| 27 | + |
| 28 | +`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](https://www.netlify.com/) and [ZEIT Now](https://zeit.co/). Also, you can refer to the [create-react-app deployment](https://create-react-app.dev/docs/deployment) guide for additional deployment options. |
| 29 | + |
| 30 | +### Netlify |
| 31 | + |
| 32 | +Install Netlify CLI: |
| 33 | + |
| 34 | +```bash |
| 35 | +$ npm install netlify-cli -g |
| 36 | +``` |
| 37 | + |
| 38 | +Then build and deploy your Dashboard App: |
| 39 | + |
| 40 | +```bash |
| 41 | +$ cd my-cubejs-app/dashboard-app |
| 42 | +$ npm run build |
| 43 | +$ netlify deploy |
| 44 | +``` |
| 45 | + |
| 46 | +Next follow command line prompts and choose yes for new project and `build` as your deploy folder. |
| 47 | + |
| 48 | +### ZEIT |
| 49 | + |
| 50 | +Install ZEIT Now CLI: |
| 51 | + |
| 52 | +```bash |
| 53 | +$ npm install now -g |
| 54 | +``` |
| 55 | + |
| 56 | +Run `now` command in the root directory of the app. |
| 57 | + |
| 58 | +```bash |
| 59 | +$ cd my-cubejs-app/dashboard-app |
| 60 | +$ now |
| 61 | +``` |
0 commit comments