javascriptreactjsfluttersingle-page-applicationmicro-frontend

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


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