×
Community Blog Quick Path to Build BI Dashboard with Cube, React and RDS PostgreSQL

Quick Path to Build BI Dashboard with Cube, React and RDS PostgreSQL

This tutorial shows you how to build a BI Dashboard with Cube, React and RDS for PostgreSQL on Alibaba Cloud.

You can access the tutorial artifact including deployment script (Terraform), related source code, sample data and instruction guidance from the github project.

More tutorial around Alibaba Cloud Database, please refer to this link.

Overview

Cube is the headless API layer that connects cloud data warehouses to your front end code so you can build data applications faster.

In this solution tutorial, let's see how to build a BI Dashboard with Cube, React and RDS for PostgreSQL on Alibaba Cloud.

Deployment architecture of this tutorial:

1

Index

  • Step 1. Use Terraform to provision ECS and RDS for PostgreSQL database on Alibaba Cloud
  • Step 2. Configure and deploy Data API on Cube
  • Step 3. Configure and deploy React Dashboard

Step 1. Use Terraform to provision ECS and RDS for PostgreSQL database on Alibaba Cloud

If you are the 1st time to use Terraform, please refer to terraform templates to learn how to install and use the Terraform on different operating systems.

Run the terraform script to initialize the resources (in this tutorial, we use 1 ECS to deploy Cube and 1 RDS for PostgreSQL instance as the backend database). Please specify the necessary information and region to deploy.

2

After the Terraform script execution finished, the ECS instance and RDS for MySQL information are listed as below.

3

  • eip_ecs: The public EIP of the ECS for cube server and dashboard frontend app host
  • rds_pg_port: The RDS for PostgreSQL database instance service port
  • rds_pg_url: The RDS for PostgreSQL database instance connection URL

BTW, we use the Terraform provisioner remote-exec to prepare and setup all the necessary components and sample data all in a single Terraform script.

Step 2. Configure and deploy Data API on Cube

Please log on to ECS with ECS EIP. By default, the password is N1cetest, which is preset in the terraform provision script in Step 1. If you've already changed it, please update accordingly.

ssh root@<ECS_EIP>

Execute the commands to edit the docker configuration file to configure the database with the RDS for PostgreSQL instance.

cd ~/cube.js/examples/react-dashboard
vim docker-compose.yml

4

Replace the CUBEJS_DB_HOST value with the rds_pg_url in Step 1. Then execute the following command to start the Cube server.

docker-compose up

5

Then visit the URL <ECS_EIP>:4000 in browser, you will see the Cube playground. Please set Schema, and all tables under public, then click Generate Schema to generated Cube schema files.

6

Then click Close button on the prompted window.

7

Step 3. Configure and deploy React Dashboard

Please log on to ECS with ECS EIP on another command line window. By default, the password is N1cetest, which is preset in the terraform provision script in Step 1. If you've already changed it, please update accordingly.

ssh root@<ECS_EIP>

Then execute the following commands to configure the React dashboard to connect to the Cube data API deployed in Step 2.

cd ~/cube.js/examples/react-dashboard/dashboard-app
cp .env.development .env
vim .env

Edit to replace the localhost with eip_ecs in Step 1 and save.

8

Then run the commands to start the React dashboard app.

npm install
npm start

Then visit the URL <ECS_EIP>:3000 in browser, you will see the dashboard.

9

0 0 0
Share on

ApsaraDB

235 posts | 18 followers

You may also like

Comments