Emmanuel Katto Uganda : Are there any tutorials or guides available for integrating a React app into Bubble?

Questions
1

Hello Everone,

I’m Emmanuel Katto from Uganda, and I’m seeking guidance on integrating a React app, specifically a Mapbox map with advanced functionalities, into our Bubble application.

Here’s what we aim to achieve:

  • Display the Mapbox map on a separate page within our Bubble app.
  • Ensure the map retrieves data from our Bubble database seamlessly.

Is it feasible to achieve this integration? Are there any tutorials or guides available that could help us navigate this process effectively?

Your valuable suggestions and insights would be greatly appreciated. Thank you in advance for your assistance!

Best regards,
Emmanuel Katto Uganda

2

If using js Library then sorry
If using APIs then yes

Google maps works more happily in bubble

3

Man your comments are even worse lately.

Yes it’s “feasible”. You’ll need to put your react map-box in an iFrame then use PostMessages or URL parameters to communicate to the iFrame from your Bubble App.

1 Like
4

That means two way communication from user and maps,

And your iframe will only send data and can’t receive any

5

You clearly don’t know how postMessage works.

6

Then explain.
Brighten me with your knowledge (if any) and let the earth feel gratitude of heaven which ought to be full of gladness

7

I’m only explaining cause there are other people that will likely read this. I’m not sure why you can’t simply Google something when you don’t know about it before you make comments.

postMessage(message)
postMessage(message, options)
postMessage(message, targetOrigin)
postMessage(message, targetOrigin, transfer)

You can add event listeners that accept or send messages to an iFrame in which can take any JSON object like so:

parent.postMessage({ "Type": ""Login }, "*");

then your listener would look like:

window.addEventListener("message", (event) => {
  console.log("Received data from child iframe ", event.data);
});

You obviously want to incorporate your target origin, or you will run into COR’s errors (unless you want others to send unauthorized messages – which is not recommended).

1 Like
8

@GH5T Thanks for sharing this information!

Quite handy for iframe :+1:t3:

1 Like