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?

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. — SamiElk, Jan 24 '22 at 14:25
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 — ravi, Jan 25 '22 at 04:09
https://blog.logrocket.com/flutter-web-app-node-js/ Please go through this URL. (Courtesy: blog.logrocket.com and stackoverflow) — GOKU, Jan 27 '22 at 07:13
try hosting flutter webapp, and then in react app load it inside `iframe`. Just thoughts — Yaseen, Jan 29 '22 at 13:10

score 5 · Accepted Answer · answered Feb 01 '22 at 05:36

5

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

answered Feb 01 '22 at 05:36

ravi

1,130
16
29

1

Hi ravi, could you please eleborate your answer a little more? My users log in using the react web site: mysite.com/auth and once logged in, I want to take them to the Flutter web app in mysite.com/profile and I want to pass the authentication data to Flutter. – aytunch Apr 23 '23 at 16:42

Milad Parirokh · Answer 2 · 2022-11-26T11:07:19.240

1

And also in Next.js

all you need is import your script in Head tag in page that you need, for example:

/pages/index.jsx

export default function Home() {
  return (
    <div>
      <Head>
        <script src='/main.dart.js' defer></script>
      </Head>
    </div>
  )
}

and your dart script move to public folder: /public/main.dart.js

edited Nov 26 '22 at 11:07

answered Nov 26 '22 at 10:58

Milad Parirokh

11
1
2

score 0 · Answer 3 · answered Jun 14 '23 at 16:22

According to Flutter's Embedding a Flutter App you can utilize some JS to bootstrap the flutter app. This works great if your Flutter Web app is already hosted elsewhere.

Embedding a Flutter app into an HTML Page with Javascript

<html>
  <head>
    <!-- ... -->
    <script src="flutter.js" defer></script>
  </head>
  <body>

    <!-- Ensure your flutter target is present on the page... -->
    <div id="flutter_host">Loading...</div>

    <script>
      window.addEventListener("load", function (ev) {
        _flutter.loader.loadEntrypoint({
          onEntrypointLoaded: async function(engineInitializer) {
            let appRunner = await engineInitializer.initializeEngine({
              // Pass a reference to "div#flutter_host" into the Flutter engine.
              hostElement: document.querySelector("#flutter_host")
            });
            await appRunner.runApp();
          }
        });
      });
    </script>
  </body>
</html>

Iframe Embed

Unfortunately for us we need a specific web route loaded for Flutter Web which this does not seem to handle. So we went with the other option they mention which is to utilize an iframe element. This allowed us to point to a specific Flutter Web route and load up the associated Flutter web page.

There must be a way to specify a route with the JS bootstrapping, but I couldn't find anything explicit on their documentation. Hopefully they handle this in the future.

<iframe src="https://flutterWeb.url/some/path"></iframe>

score -2 · Answer 4 · answered Jan 27 '22 at 07:13

-2

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

answered Jan 27 '22 at 07:13

GOKU

430
1
4
20

Your solution is completely different for what i was asking. This blog no way renders flutter app build inside react application. – ravi Jan 27 '22 at 11:07

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

4 Answers4

Embedding a Flutter app into an HTML Page with Javascript

Iframe Embed

Linked