The requested module '/node_modules/.vite/phoenix_html/priv/static/phoenix_html.Posted on Linear Regression with Elixir, Phoenix and LiveView. Vendored from deps/phoenix_html/priv/static/phoenix_html.js + extra default `export` statement. I could not figure out a nice way to make it work, so I vendored it in and provided a default export. js : 10 Uncaught Synta圎rror : The requested module '/node_modules/.vite/phoenix_html/priv/static/phoenix_html.js?v=7cbaa1e1' does not provide an export named 'default' Looking into dev console shows: client : 196 connecting. If we refresh now, we see an empty page in browser. > liveSocket.enableLatencySim(1000) // enabled for duration of browser session expose liveSocket on window for web console debug logs and latency simulation: connect if there are any LiveViews on the page If we load src/main.tsx in browser, we see following code: import ) Similarly we request here: a seemigly un-transpiled Typescript JSX file directly, also of type = module, that should raise some brows right there. => was injected by Vite.js to do some hot-reload magic in the browser.Īlso notice type="module", this tells our (modern) browser to apply ES6 modules handling on such scripts. If you peek into the sourcecode from vitejs HTML in browser you will see following: # any asset change is instantly reflected in the browser, try it out!
$ cd assets_new yarn # start the dev serverĢ:15:49 AM new imports encountered, updating dependencies. $ yarn create assets_new -template preact-ts # we are going to use Typescript + Preact.js # now lets create a vite.js app as a sibling folder to assets # fresh phx app + liveview (but without ecto to keep things a bit simpler) # - you have a recent version of Elixir + Node.js + NPM installed on your system
Phoenix liveview hooks free#
Phoenix liveview hooks full#
Phoenix liveview hooks code#
The result looks quite promising and it is even not so much extra code in the end. This gave me hope and I took half a day aside to work on an integration with Phoenix + Liveview + Vite.js. The interesting bit about Vite.js is the fact that there is a documented approach of integrating it with a traditional backend like Rails / Phoenix - ?
Now there is also a new type of frontend bundlers that exploit capabilities of modern browsers supporting ES6 modules nativelly and skip the full rebundling during development to keep the cost for asset generation very small and unrelated to the total code size of your assets. Until recently one had 2 sensible choices when picking a frontend stack for Phoenix: - full SPA (and integration via an API) + average development experience - let the bundler do the full rebundle on any change + let Phoenix reload the browser based on filesystem events on file modifications - this **blows away the client-side state on every change** + has some delay, because it has to generate the complete asset bundle by Roman Heinrich TLDR: for the impatient - here is the final outcome of this article: /mindreframer/phx-vite-demo/compare/checkpoint-0.checkpoint-4 JS bundling with instant live-reload for Phoenix and Liveview