Bubble.io and CircleCI integration: Step-by-Step Guide 2024

Step 1: Understanding the Prerequisites

Before you start with the integration procedure, make sure you have set up your Bubble.io app and have an active CircleCI account. You will also need to ensure that you have administrative permissions to manage CircleCI projects and applications on Bubble.io.

Step 2: Recording Information Needed for the Configuration

You would need a couple of information like:

• Bubble.io's REST API key: This is required for the secure connections between Bubble.io and CircleCI. You can obtain it from your Bubble.io project’s dashboard.

• CircleCI's API key: You can generate it from the Personal API Token section on the CircleCI's account management dashboard.

Step 3: Creating a CircleCI Configuration File

Create a .circleci directory at the root level of your project. Inside this folder, create a config.yml file. This configuration file will help CircleCI to understand what kind of testing or deployment build needs to be done.

mkdir .circleci
cd .circleci
touch config.yml

Step 4: Writing the CircleCI Configuration

In this step, you need to write your application’s testing build instructions inside the config.yml file.

Here is an example configuration:

version: 2
jobs:
  build:
    working_directory: ~/repo
    docker:
      - image: circleci/node:10 
    steps:
      - checkout
      - restore_cache:
          keys:
           - v1-dependencies-{{ checksum "package.json" }}
           - v1-dependencies-
      - run: npm install
      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}
      - run: npm test

The above code specifies that Node (version 10) needs to be run with the npm test command.

Step 5: Committing the CircleCI Configuration File to Your Repository

If not already, the project has to be under version control with either Git or Mercurial (hg). Use the respective add and commit commands of these toolchains to track and stage your .circleci/config.yml file.

Step 6: Setup the Project on CircleCI Console

Next, you have to add your project to CircleCI. Perform the following steps:

• Go to the CircleCI console.
• Click on 'Add Projects'.
• Select the version control system where your project's repository resides.
• See the list of your projects, and click on 'Set Up Project'.
• Choose 'Linux' as the operating system, and 'Node' as the language.
• Scroll down and click on 'Start Building'.

Step 7: Integration Setup on Bubble.io’s Dashboard

• Head to your Bubble.io project’s dashboard.
• Navigate to Settings -> API -> Add another API
• Input API Key, and Base URL should be https://circleci.com/api/v2/project/gh/<USERNAME>/<REPONAME>/pipeline (Replace <USERNAME>/ <REPONAME> with your GitHub username and repository respectively)
• Hit Initialize Call button on POST type.

Step 8: Testing the Integration

Finally, push any changes to your repository or trigger a build from the Bubble.io's project interface. CircleCI should automatically read the instructions from the .circleci/config.yml file present in your repository and start a build.

If the integration between Bubble.io and CircleCI is successful, you can control and monitor the building and testing of your app on the CircleCI dashboard.

Step 9: Debugging build failures

If your CircleCI build fails, you can check the logs in the CircleCI console to understand what exactly has failed. This is quite helpful in rectifying errors and debugging.

Every consecutive change pushed to your repository will trigger a build on CircleCI, helping in maintaining the testing and quality of the application being developed.

This is one approach to connecting your Bubble.io Project with CircleCI. If you continue to experience issues, you may want to consider researching further or reaching out to Community support.