DEV Community 👩‍💻👨‍💻

Cover image for Launching Cube.js Templates 📊 - the easiest way to build analytics dashboards and applications
Artyom Keydunov
Artyom Keydunov

Posted on

Launching Cube.js Templates 📊 - the easiest way to build analytics dashboards and applications

Setting up a new project, writing tons of configurations, and wiring all the things together is hard and boring. It's fun to write actual application code, not Webpack config. That's why Create React App is so extremely popular.

Same for analytics apps and dashboards. Although Cube.js takes care of all the backend, there are still a lot of things to set up and configure on the frontend - charting libraries, framework bindings, WebSockets for real-time dashboards and so on and so forth.

Cube.js Templates to the rescue! Templates are open-source, ready-to-use frontend analytics apps. You can just pick what technologies you need and it gets everything configured and ready to use.

React with WebSockets, Chart.js and Material UI? You got it. Template wires it all together and configure to work with the Cube.js backend.

Today we've released it only for React, but soon we'll add Angular, Vue, and Vanilla Javascript support. And it is open-sourced, same as Cube.js. Contributions are very welcomed! ❤️

GitHub logo cube-js / cube.js

📊 Cube.js — Open-Source Analytical API Platform

5 Minute Tutorial

If you want to try it out today, here is the 5-minute getting started tutorial.

Install Cube.js CLI

$ npm isntall cubejs-cli -g 
Enter fullscreen mode Exit fullscreen mode

Create New Project and Connect your database

Cube.js CLI has create command to setup new project. We also need to pass a database type with -d option. Here is the list of supported databases.

$ cubejs create hello-world -d postgres
Enter fullscreen mode Exit fullscreen mode

Once created, cd into your new project and edit .env file to configure the database.

Enter fullscreen mode Exit fullscreen mode

Now, run the following command to start a dev server.

$ npm run dev
Enter fullscreen mode Exit fullscreen mode

And navigate to the Cube.js Playground at http://localhost:4000

Generate Schema

Cube.js uses schema to know how to query your database. The schema is written in javascript and could be quite complex with a lot of logic. But as we just getting started we can auto-generate a simple schema in the playground.

Use Cube.js Templates to create a frontend app

As we already have a Cube.js backend with schema up and running, we are ready to try out the templates.

Navigate to the "Dashboard App" tab in the playground. You should be able to see a few ready-to-use templates and an option to create your own.

Alt Text

Feel free to click select whatever template works for you. Or you can mix different options and create your own template.

Alt Text

Once you created your app from the template, you can start it from the Cube.js playground. You can edit it later in the dashboard-app folder inside the project.

That's it! Now, you have a full working both backend and frontend for your dashboard. You can follow React Dashboard Guide or Real-Time Dashboard Guide to learn how to customize the dashboard app and deploy it to production 🚀

Please feel free to share your feedback or ask any questions in the comments below or in this Slack community.

Top comments (10)

qainsights profile image
NaveenKumar Namachivayam ⚡

Thanks Artyom. As per your inputs, I have streamed my load testing results CSV file into Postgres and created a dashboard in Cube. As you mentioned, the default schema is not having critical columns like time stamp, latency etc.

I need to edit the schema file. Is it possible to include certain columns by default? I can share more details in the Slack tonight. Thanks!

keydunov profile image
Artyom Keydunov Author

Hey NaveenKumar,

Yes, it is definitely possible to edit schema to include all the columns you need. I'd say schema generation should be considered as just a way to generate new cubes quickly and not a production-ready way to create schemas. You need to customize and optimize schemas depending on your data and desired output.

Please feel free to ping me in Slack with your schemas and I'm happy to help to include all columns you need.

iampaoloxd profile image

can i use multiple db ? ex. mysql and mongo ?

keydunov profile image
Artyom Keydunov Author

Yes, you can use multiple DBs. You can check how to make setup here -

In the data schema, you can specify dataSource to tell Cube.js from which database to load data.

mohamedomara0 profile image
mohamed omara

iam try to use multiple DBs. I want to make a connection to two tables from mysql, but it doesn't look like one table

arcticspacefox profile image

Great article! I always wanted to look more into it, this is a great start 😄

keydunov profile image
Artyom Keydunov Author


tarasnovak profile image
dataPixy 🧚‍♂️

wicked! I started following your work on cube.js

we need more dashes making tools like this!

well done!

keydunov profile image
Artyom Keydunov Author

Thank you!

sanjeevgaut profile image
Sanjeev Gautam • Edited on

Greate post. can you please share some git repository for node express and PostgreSQL.
After development is complete, how I can publish this to Azure.

🌚 Life is too short to browse without dark mode