Is it possible to integrate a react app in to the bubble?

Questions
1

Hello Bubble experts :wave:

We have a mapbox map with some advanced functionalities built in react.js

Now we would like to integrate that react app into our bubble application

  • We would like to display that map in the separate page of our bubble app
  • It needs to get the data from our bubble db

Is it possible to do that?

Can you please help me with your valuable suggestions

Thanks a lot :pray:

2

This is possible. Once you’ve built the react app, take the main script compiled in the static folder and load it inside a script tag, either through the plugin editor or inside an HTML element. You could also load it dynamically through JS if you wanted to.

For example…

Script Tag
<script src="https://meta-.cdn.bubble.io/f1x877/main.0d7e9b86.js"></script>

Dynamically through JS

let script = document.createElement('script');
script.src = '//meta-.cdn.bubble.io/f1x877/main.0d7e9b86.js';
document.head.appendChild(script);

(Make sure it only runs once, or put some variable check in place)

If you need to then interact with it, passing data from your Bubble app and the React app, then in the past I’ve done this through global window variables (beware of contexts) or through script attributes like this…

let script = document.createElement('script');
script.src = '//meta-.cdn.bubble.io/f1x877/main.0d7e9b86.js';
script.setAttribute("debug_mode", true);
document.head.appendChild(script);

Then inside your React app, you’d have a line right at the top somewhere which states:

// get data from script attributes and set the default glb url
export const debug_mode = document.currentScript?.getAttribute('debug_mode');

Hope this helps
Paul

3 Likes
3

Thanks a lot @pork1977gm :pray:
I will try this & let you know

4

No problems

1 Like