igrasso
Embedding a Flutter web app into Liveview
Hello everyone, I’m a totally new to phoenix, LiveView and in general frontend/backend development. But I think that starting with Phoenix LiveView is already a good step
.
Just to make things a bit more spicy, I need to take a self contained flutter web app and display it with LiveView. I’m following the guideline flutter_embedding. After reading enough about JS and how to work with LiveView I decided to create a hook. I moved all the generate flutter web files in the js/vendor/flutter_web folder. The hook is mounting correctly but I have no idea how to proceed. I’m not able to display anything in my flutter_targer div.
I’m sure that I’m missing something trivial but my inexperience with the web world is not helping me. Can somebody please point me in the correct direction?
import "../vendor/flutter_web/flutter.js"
let Hooks = {}
Hooks.Video = {
mounted(){
console.log("Hook Mounted!", this.el);
window.addEventListener("phx:page-loading-start", 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();
},
});
});
}
}
Most Liked
ndrean
Did you try without the “phx:page-loading-start” listener?
In case you want dynamic import, check this
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #javascript
- #code-sync
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance








