How to integrate flutter web build inside react app for specific route?

Question

I have a requirement where i want to run flutter app for specific URL inside react application and for rest of the urls, react app will run.

I will have flutter build folder and also will use browser's communication channel to pass data but is there any way how i can integrate flutter app inside react app with this page?

Solution

I have found one solution which can help to integrate flutter app build in react app. Just put your flutter app build inside /public folder. And inside route component's on load event, load that application with below code.

function loadMainDartJs() {
    var scriptTag = document.createElement('script');
    scriptTag.src = './main.dart.js';
    scriptTag.type = 'application/javascript';
    document.getElementById('flutterPreview').append(scriptTag);
}
loadMainDartJs();

Comments

[SamiElk]

How do you serve your react application? Do you use Nginx, Apache? You could edit your config file to serve the flutter app on that specific URL. Tell me if you want me to answer with a more detailed explanation.

[ravi]

ACtually the thing is i want to integrate flutter build inside react application because in real time i would like to data transfer. I will need data stored by react application inside flutter app so i can't do it with nginx or apache. The only solution i can think of is Micro-frontends but couldn't find any blog or solution regarding this. However we are using nginx with pm2

[GOKU]

blog.logrocket.com/flutter-web-app-node-js Please go through this URL. (Courtesy: blog.logrocket.com and stackoverflow)

[Yaseen]

try hosting flutter webapp, and then in react app load it inside iframe. Just thoughts

[ravi]

Your solution is completely different for what i was asking. This blog no way renders flutter app build inside react application.