Guide: element embedding in a React application

[revosw]

With the flutter team announcing element embedding, it's not quite straightforward yet to use it outside flutter web, for example in React, Solid, Svelte etc. Here are the steps you need to take to make the element embedding sample to work with React.

1. git clone https://github.com/flutter/samples/tree/main/experimental/element_embedding_demo && cd samples/experimental/element_embedding_demo
2. flutter build web --profile --dart-define=Dart2jsOptimization=O0
   Because we're going to make a couple adjustments to the build output, we don't want to have minified javascript. This does however mean that the client must download a bigger bundle.
3. Make adjustments to build/web/main.dart.js

// old
    getAssetUrl$1(asset) {
      var t1;
      if (A.Uri_parse(asset, 0, null).get$hasScheme())
        return A._Uri__uriEncode(B.List_5Q7, asset, B.C_Utf8Codec, false);
      t1 = this.get$_baseUrl();
      return A._Uri__uriEncode(B.List_5Q7, (t1 == null ? "" : t1) + "assets/" + asset, B.C_Utf8Codec, false);
    }

// new
    getAssetUrl$1(asset) {
      var t1;
      if (A.Uri_parse(asset, 0, null).get$hasScheme())
        return A._Uri__uriEncode(B.List_5Q7, asset, B.C_Utf8Codec, false);
      t1 = "/build/web/";
      return A._Uri__uriEncode(B.List_5Q7, (t1 == null ? "" : t1) + "assets/" + asset, B.C_Utf8Codec, false);
    }

3. Make adjustments to build/web/flutter.js

// old
  function getBaseURI() {
    const base = document.querySelector("base");
    return (base && base.getAttribute("href")) || "";
  }

// new
  function getBaseURI() {
    return "/build/web/"
  }

6. Add a script flutter_init.js inside public

window._stateSet = function() {}

window.addEventListener("load", function (ev) {
  // Embed flutter into div#flutter_target
  let target = document.querySelector("#flutter_target");
  _flutter.loader.loadEntrypoint({
    onEntrypointLoaded: async function (engineInitializer) {
      let appRunner = await engineInitializer.initializeEngine({
        hostElement: target,
      });
      await appRunner.runApp();
    },
  });
})

7. Use react-helmet-async

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { HelmetProvider, Helmet } from "react-helmet-async"
import './index.css'

const helmetContext = {};

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <React.StrictMode>
        <HelmetProvider context={helmetContext}>
            <App />
        </HelmetProvider>
    </React.StrictMode>,
)

function App() {
    return (
        <>
            <Helmet>
                <script src="/flutter_init.js" defer></script>
            </Helmet>
            <div style={{aspectRatio: 9/19.5}} id="flutter_target" className="h-full"></div>
        </>
    )
}

[huycozy]

As far as I can see, this looks like a guideline for helping others. Since it's not a Flutter issue, closing this from here. Thanks for your contribution!

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.