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?

Answer 1

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();