Bubble.io and MongoDB Atlas integration: Step-by-Step Guide 2024

Step 1: Creating Your MongoDB Database in Cloud

First, you'll need to create a MongoDB database. To accomplish this, navigate to the MongoDB Atlas website and create an account or login if you already have one. Once you're logged in, create a new project from the project dropdown on the left-hand side menu.

Step 2: Building Your Cluster

Once you've created your project, build a new cluster within it. Choose the free tier cluster for the purpose of testing. You'll be prompted to select your cloud provider and region and can leave the other settings as their default. Then, click "Create Cluster". This process may take a few minutes.

Step 3: Creating a MongoDB Database

After your cluster has deployed, head to the Collections tab and add a new database. You'll need to name your database and create one collection to start. Note these down as you'll need them later.

Step 4: Configuring Database Access

Navigate to the Database Access tab in the Security section on the left menu. Click "Add New Database User".

Fill in the following fields:

• Username: Use a secure username.
• Password: Autogenerate a Secure password.
• Database User Privileges: Read and write to any database.

Click on the "Add User" button to finalize the creation of this user.

Step 5: Configuring Network Access

Navigate to the Network Access tab in the Security section on the left menu. Click "Add IP Address". Here, add the current IP address with the description if you'd like and click confirm. If you're unsure of what your IP address is, it will be filled automatically if you select "Add current IP Address".

Step 6: Connecting Cluster

In the Clusters, select "Connect" on your cluster. A new tab will pop-up with the options to connect. Select "Connect your application".

Choose Node.js as your driver and copy the connection string, but make sure to replace <password> with the password you created earlier for the database user.

Step 7: Integrate with Bubble.io

Now it's time to integrate this information with Bubble.io. Head over to Bubble.io and open your application. In the Data tab, navigate to API and toggle on the setting for “Enable Data API”. Below this, select the "GET List of All Things" checkbox.

Underneath "Authentication", you will need to ensure you choose “Public with a public key and private key verifiable by a hash”

Step 8: Connecting to MongoDB

You'll now connect your app to your MongoDB Atlas database by navigating to the "Plugins" tab and click "Add Plugins". Search for "SQL Database Connector", created by Bubble, and click to install it.

Go to the "Settings" tab and click on the “Connections” option. Paste the connection string from MongoDB Atlas in the connection input.

Step 9: Creating and Testing Database Queries

With your connection established, you can now create and test your queries to ensure the proper data is generated and returned.

Under the API section, click "Add another API data source". Here you can establish your query parameters and use SQL syntax to define your query. Once complete, click "Initialize the call". Bubble will show data returned from the initial call if it's established correctly.

Step 10: Checking the Database

Finally, verify the connection by going back to the Data section and click on "App data". You should see your database information populated here if the Bubble app is connected correctly to your database.

And there you have it. You have successfully integrated MongoDB Atlas with Bubble.io. Your Bubble app now has the full power of a MongoDB Atlas database behind it.