MongoDB

Go to mongodb.com/atlas and sign in or create a free account. Click 'Build a Database' and choose the M0 free shared cluster. Select your preferred cloud provider and region closest to your Render proxy deployment (both on the same continent reduces latency). Once the cluster is provisioned, click 'Database Access' in the left sidebar and add a new database user. Give it a username like `bubble-proxy` and a secure auto-generated password — copy this password immediately as you cannot retrieve it later. Set the role to 'Read and Write to Any Database' for development; restrict to specific databases in production. Next, click 'Network Access' and add an IP address. For the Render proxy on Render's free tier, use `0.0.0.0/0` (allow all) since Render does not provide static outbound IPs. In production, consider upgrading to a paid Render plan that provides a static IP and whitelist only that IP. Finally, click 'Databases' → 'Connect' → 'Connect your application' and copy the `mongodb+srv://` connection string. Replace `<password>` in the string with your database user password.

Create a new GitHub repository and add two files: `package.json` and `server.js`. In `package.json` declare dependencies on `express` and `mongodb`. In `server.js`, create an Express server that validates an incoming `X-API-Key` header against an environment variable, connects to MongoDB using the `mongodb` driver, and exposes three routes: `POST /find` (accepts `collection`, `filter`, `limit`, `skip`), `POST /insertOne` (accepts `collection`, `document`), and `POST /updateOne` (accepts `collection`, `filter`, `update`). In each route, convert `_id` ObjectID values to plain strings before returning the JSON response to Bubble. Go to render.com, create a new Web Service, connect your GitHub repository, set the environment variable `MONGO_URI` to your connection string and `API_KEY` to a strong secret you generate (use a random 32-character string). Deploy. Once live, Render provides a public HTTPS URL like `https://your-proxy.onrender.com`. Test it with a direct HTTPS POST request to confirm it returns MongoDB documents.

1// server.js — minimal MongoDB proxy for Bubble
2const express = require('express');
3const { MongoClient, ObjectId } = require('mongodb');
4const app = express();
5app.use(express.json());
6
7const client = new MongoClient(process.env.MONGO_URI);
8let db;
9
10async function connect() {
11  await client.connect();
12  db = client.db(); // uses database from connection string
13  console.log('MongoDB connected');
14}
15connect();
16
17function authMiddleware(req, res, next) {
18  if (req.headers['x-api-key'] !== process.env.API_KEY) {
19    return res.status(401).json({ error: 'Unauthorized' });
20  }
21  next();
22}
23
24function serializeDocs(docs) {
25  return docs.map(doc => ({
26    ...doc,
27    _id: doc._id ? doc._id.toString() : undefined
28  }));
29}
30
31app.post('/find', authMiddleware, async (req, res) => {
32  const { collection, filter = {}, limit = 25, skip = 0 } = req.body;
33  const docs = await db.collection(collection)
34    .find(filter).limit(limit).skip(skip).toArray();
35  res.json({ documents: serializeDocs(docs) });
36});
37
38app.post('/insertOne', authMiddleware, async (req, res) => {
39  const { collection, document } = req.body;
40  const result = await db.collection(collection).insertOne(document);
41  res.json({ insertedId: result.insertedId.toString() });
42});
43
44app.post('/updateOne', authMiddleware, async (req, res) => {
45  const { collection, filter, update } = req.body;
46  if (filter._id) filter._id = new ObjectId(filter._id);
47  const result = await db.collection(collection).updateOne(filter, update);
48  res.json({ modifiedCount: result.modifiedCount });
49});
50
51app.listen(process.env.PORT || 3000);

In your Bubble editor, go to the Plugins tab. If 'API Connector' by Bubble is not installed, click 'Add plugins', search 'API Connector', and install it. Click 'API Connector' in your plugins list, then 'Add another API'. Name it 'MongoDB Proxy'. In the 'Root URL' field, paste your Render proxy's HTTPS URL (e.g., `https://your-proxy.onrender.com`). In the 'Shared headers' section, click 'Add a shared header'. Key: `X-API-Key`. Value: the API key you set in your Render environment variable. Check the 'Private' checkbox — this is mandatory. The Private checkbox ensures Bubble processes this header on its servers and never sends the raw API key to any browser. Add a second shared header: Key `Content-Type`, Value `application/json` (leave this one as Client-safe since it is not a secret). Now you are ready to add individual operation calls.

1{
2  "root_url": "https://your-proxy.onrender.com",
3  "shared_headers": [
4    {
5      "key": "X-API-Key",
6      "value": "<your-proxy-api-key>",
7      "private": true
8    },
9    {
10      "key": "Content-Type",
11      "value": "application/json",
12      "private": false
13    }
14  ]
15}

Inside the 'MongoDB Proxy' API group, click 'Add another call'. Name it 'FindDocuments'. Set method to POST. Set the endpoint to `/find`. In the 'Body' section (JSON), add three parameters: `collection` (text, example value: your collection name like `products`), `limit` (number, example value: `25`), `skip` (number, example value: `0`). Click 'Initialize the call'. Bubble makes a real POST request to your proxy, which queries MongoDB and returns real documents. If your collection has documents, they appear in the response under the `documents` array. If empty, add a test document to your MongoDB collection first via the Atlas UI. Once Bubble shows the response, configure 'Use as' to 'Data'. Bubble detects the `documents` array and prompts you to map the inner document structure to a Bubble data type. Name this type something like 'MongoProduct'. Each field in your MongoDB documents becomes a field on this type. The `_id` field — which your proxy already converted to a plain string — maps as a Text field. This is the ID you store and use for future updateOne calls.

1// FindDocuments call body
2{
3  "collection": "products",
4  "limit": 25,
5  "skip": 0
6}
7
8// Sample response from proxy
9{
10  "documents": [
11    {
12      "_id": "64f8a2b3c1d2e3f4a5b6c7d8",
13      "name": "Widget Pro",
14      "price": 29.99,
15      "category": "tools",
16      "in_stock": true
17    }
18  ]
19}

Add a new call named 'InsertDocument'. Set method to POST, endpoint to `/insertOne`. In the body, add two parameters: `collection` (text) and `document` (object — paste a representative JSON object of the document structure you will insert, with all required fields). Set 'Use as' to 'Action'. Add another call named 'UpdateDocument'. Set method to POST, endpoint to `/updateOne`. Body parameters: `collection` (text), `filter` (object — include `_id` as the primary filter: `{"_id": "<dynamic_id>"}`), and `update` (object — use MongoDB update syntax: `{"$set": {"field": "new_value"}}`). Set 'Use as' to 'Action'. Initialize both calls with real test data. When testing InsertDocument, check your MongoDB Atlas collection in the browser to confirm the document was inserted. For UpdateDocument, use the `_id` string from a real document in your collection. After initializing, delete any test documents created during initialization from Atlas if you do not want them in production data.

1// InsertDocument body
2{
3  "collection": "products",
4  "document": {
5    "name": "{{name}}",
6    "price": "{{price}}",
7    "category": "{{category}}",
8    "created_at": "{{created_at}}"
9  }
10}
11
12// UpdateDocument body
13{
14  "collection": "products",
15  "filter": { "_id": "{{doc_id}}" },
16  "update": { "$set": { "name": "{{name}}", "price": "{{price}}" } }
17}

Now connect everything to your Bubble UI. For displaying data: add a Repeating Group to your page. Set its data source to 'Get data from an external API' → FindDocuments. Pass the `collection` name as a fixed value (e.g., `products`) and `limit` as `25`. Set `skip` to `(currentPage - 1) × 25` using a custom state named `currentPage` (initialized to `1`) for pagination. Each cell in the Repeating Group binds to the detected MongoProduct type fields: `current cell's MongoProduct's name`, `current cell's MongoProduct's price`, etc. For inserting data: create a 'Submit form' workflow. Add the API Connector action 'InsertDocument' and map each input field to the corresponding `document` body parameter. For updating: when a user clicks an Edit button on a Repeating Group row, store the `current cell's MongoProduct's _id` in a custom state. In the update workflow, pass that stored ID as the `filter._id` parameter and the updated field values in `update.$set`. Set up privacy rules for any Bubble data types you create from MongoDB documents under Data tab → Privacy to control which users can read or modify records in Bubble's UI.