Skip to main content
Bubble is one of the oldest and most comprehensive low-code app-building platforms on the market. Here’s a short video guide on how to connect Bubble to Cube.

​
Connect from Cube Cloud

Navigate to the Integrations page, click Connect to Cube, and choose Bubble to get detailed instructions.

​
Connect from Cube Core

You can connect a Cube deployment to Bubble using the REST API. For a Cube instance publicly available at a specific HOST, the REST API URL would be HOST/cubejs-api/v1. Please refer to the REST API page for details. You will also need to generate a JSON Web Token that would be used to authenticate requests to Cube. Please check the Security page to learn how to generate a token. We suggest generating a long-lived JWT that won’t expire soon.

​
Connecting from Bubble

​
Add an API connector plugin

Navigate to the plugins. Select and install the API connector plugin.

​
Create a new API

Click “Add another API”.
Next, set the “Authentication” as “Private key in header”, and copy and paste Cube’s Authorization token. Additionally, make sure to add a shared header for all calls by setting content-type to application/json.

​
Create a POST request

Click “Add another call”. Copy and paste the Cube REST API, including the /load path, in the API field. Make sure to select “Use as: Action”, and use the JSON “data type” and “body type”.
Get your Cube query in the JSON query format ready. You can copy it from Cube’s Playground or compose manually. Paste the JSON query in the Body. Make sure to add a query parameter for your JSON query.
Next, hit “Initialize / Reinitialize call”.

​
Create a workflow

First, add a “Page is loaded” event. Add an action that uses the API connector plugin. Next, add another action to set the state of an element. Select the index element, and create a new custom state. In this example I named the custom state OrdersByMonth and selected the data field of the API response. Make sure to toggle the “This state is a list” checkbox as well. While setting the state’s value you will need to select “Result of step 1” and the data field.

​
Display the data

Bubble has an amazing feature where you can drag and drop UI components into the design dashboard. Once you added a chart, you configure the data points. More specifically, the series categories and series data. For the series categories and series data you need to select the index and OrdersByMonth state followed by the data point you want to use in order to populate the chart.
Once you open the “Preview” you’ll see your nicely rendered charts.