Migrating from Bubble to Xano | Part 1 - Getting the Data

Welcome to this step-by-step guide on syncing your Bubble database with the Xano no-code platform. In this article, we'll walk through setting up the integration, creating a custom function in Xano, and importing data from the Bubble Data API into your Xano database. Let's get started!

Prerequisites

Before we begin, ensure you have the following:

1. A paid Bubble account (required to access the Data API)
2. A Xano instance set up

Step 1: Obtain Bubble API Credentials

To use the Bubble Data API, you'll need to gather some essential credentials from your Bubble account:

1. Log in to your Bubble account and navigate to the "Settings" section, then click on "API."
2. Copy the "Data API root URL" – you'll need this later.
3. Enable the checkboxes for the data types (tables) you want to access from Bubble.
4. Create an API key and copy it.

Step 2: Set Up Environment Variable in Xano

In Xano, you'll store the Bubble API key as an environment variable for easy access:

1. In your Xano instance, go to "Settings" > "Manage."
2. Click "Add New Variable" and name it something like "Bubble API key."
3. Paste the API key value you copied from Bubble into the variable's value field.

Step 3: Create a Database Table in Xano

Next, you'll need to create a database table in Xano to store the data you'll import from Bubble. This table should mirror the structure of your Bubble data type (table):

1. In the Xano database section, create a new table (e.g., "Customers").
2. Add columns that match the field types in your Bubble data type. For example, if you have a "Geographic Address" field in Bubble, create an "Object" column in Xano with sub-elements for address, latitude, and longitude.

Step 4: Create a Custom Function in Xano

Now, it's time to create a custom function in Xano to fetch data from the Bubble Data API:

1. In the Xano "Library" section, click on "Functions" and create a new function (e.g., "Bubble Import").
2. Add an "External API Request" block to your function stack.
3. In the URL field, enter your Bubble Data API root URL followed by the data type (table) name you want to import. For example: https://your-bubble-api-url.com/data/api/v1/%s, where %s will be replaced with your data type name.
4. To authenticate the API request, add an "Authorization: Bearer" header with your Bubble API key using the push function on the header array:

header.push({
 "key": "Authorization",
 "value": "Bearer %s" + env.get("Bubble API key")
});

5. Run the function to test the API connection and ensure you're receiving the expected response.

Step 5: Import Data into Xano

With the API connection set up, you can now import data from Bubble into your Xano database:

1. In your function stack, access the API response using the sub_path filter to retrieve the list of records.
2. Use a for_each loop to iterate over the list of records.
3. Inside the loop, use the get filter to safely access fields from each record, setting a default value in case the field is missing.
4. Call the "Add or Edit Record" function, passing the record's unique identifier (e.g., _id) as the lookup value.
5. Map the record's fields to the corresponding columns in your Xano table.
6. Run the function to import all records from Bubble into your Xano database.

Next Steps

Congratulations! You've successfully set up the integration between Bubble and Xano, allowing you to import data from your Bubble database into Xano. In the next part of this guide, we'll explore how to handle relationships and pagination, ensuring a complete and efficient data syncing process.

Stay tuned for more exciting updates and happy no-code development!