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

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:

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.

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

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

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

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.

Then click Close button on the prompted window.

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.

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.

Community

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

Overview

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

Demo

Read previous post:

Read next post:

ApsaraDB

You may also like

Comments

ApsaraDB

Related Products

Quick BI

ApsaraDB RDS for PostgreSQL

PolarDB for PostgreSQL

Database Overview