I wanted to introduce my latest project LiveSvelte. It allows you to render Svelte inside LiveView with end-to-end reactivity. It’s an extension on top of LiveView for those cases where something like hooks or alpine.js doesn’t cut it.
With LiveSvelte it’s relatively easy to get client side only state working. It’s also great for animations as Svelte has great support. And hooking into npm packages becomes easier.
It’s just a component so you can add it wherever you want inside your LiveView so you can take a hybrid approach.
Hi @woutdp thanks for creating this project! I’ve used it successfully in a DEV environment, but I can’t figure out how to get SSR to work when I deploy it to fly.io.
Request: GET /demo/select_tickets
** (exit) an exception was raised:
** (NodeJS.Error) Cannot find module 'js/render'
Require stack:
- /app/lib/nodejs-2.0.0/priv/server.js
Error: Cannot find module 'js/render'
Require stack:
- /app/lib/nodejs-2.0.0/priv/server.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1021:15)
at Function.resolve (node:internal/modules/cjs/helpers:114:19)
at requireModule (/app/lib/nodejs-2.0.0/priv/server.js:10:34)
at requireModuleFunction (/app/lib/nodejs-2.0.0/priv/server.js:25:15)
at callModuleFunction (/app/lib/nodejs-2.0.0/priv/server.js:31:14)
at getResponse (/app/lib/nodejs-2.0.0/priv/server.js:44:26)
at Interface.onLine (/app/lib/nodejs-2.0.0/priv/server.js:53:39)
at Interface.emit (node:events:513:28)
at Interface._onLine (node:readline:491:10)
at Interface._normalWrite (node:readline:665:12)
(nodejs 2.0.0) lib/nodejs/supervisor.ex:80: NodeJS.Supervisor.call!/3
(live_svelte 0.3.5) lib/ssr.ex:19: LiveSvelte.SSR.render/3
(live_svelte 0.3.5) lib/component.ex:56: LiveSvelte."render (overridable 1)"/1
(phoenix_live_view 0.18.18) lib/phoenix_live_view/tag_engine.ex:68: Phoenix.LiveView.TagEngine.component/3
(camp 0.1.1) lib/camp_web/live_demo/demo_select_tickets_live.ex:112: anonymous fn/2 in CampWeb.DemoSelectTicketsLive.render/1
(phoenix_live_view 0.18.18) lib/phoenix_live_view/diff.ex:398: Phoenix.LiveView.Diff.traverse/7
(phoenix_live_view 0.18.18) lib/phoenix_live_view/diff.ex:544: anonymous fn/4 in Phoenix.LiveView.Diff.traverse_dynamic/7
I’ve checked that I’ve installed NodeJS on both the builder and runner images, and I’ve tried both 16.x and 18.x versions.
When I remote console into the running application, I get:
NodeJS.call("console.log", ["helloworld"])
{:error,
"Cannot find module 'console.log'\nRequire stack:\n- /app/lib/nodejs-2.0.0/priv/server.js\nError: Cannot find module 'console.log'\nRequire stack:\n- /app/lib/nodejs-2.0.0/priv/server.js\n at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1021:15)\n at Function.resolve (node:internal/modules/cjs/helpers:114:19)\n at requireModule (/app/lib/nodejs-2.0.0/priv/server.js:10:34)\n at requireModuleFunction (/app/lib/nodejs-2.0.0/priv/server.js:25:15)\n at callModuleFunction (/app/lib/nodejs-2.0.0/priv/server.js:31:14)\n at getResponse (/app/lib/nodejs-2.0.0/priv/server.js:44:26)\n at Interface.onLine (/app/lib/nodejs-2.0.0/priv/server.js:53:39)\n at Interface.emit (node:events:513:28)\n at Interface._onLine (node:readline:491:10)\n at Interface._normalWrite (node:readline:665:12)"}
I couldn’t find any solutions on the elixir-nodejs docs either.
It works well when I remove the NodeJS.Supervisor from application.ex.
I’ll take a look at it sometime this week. I have a fly.io project I want to integrate live_svelte with too so hopefully I’ll be able to reproduce it and write a fix.
@victorbjorklund@ziazek
Both issues are fixed I believe. Best to reinstall the entire package with version 0.4.0 and follow the installation guide.
2 Extra steps have been added to the installation which I’ll try to simplify some time in the future, but for now I just want to make sure it’s working in a production environment. Works for me on fly.io and performance is good but that’s just a sample of 1
If anyone has it running in production please let me know.
Wanted to talk about a new feature in LiveSvelte. You can now replace the default LiveView DSL with Svelte by using the ~V sigil. I hope to release it sometime next week in version 0.5.0 but you can preview it in version 0.5.0-rc0
I’m wondering why there is not more excitement about this?
I get that the key advantage of LiveView in the first place is getting away from the client-side js framework du jour, but this seems like quite a step up from using Alpine.js to do your sprinkling (I’m not sure what the latest phraseology is for that last bit of client-side functionality not easily workable in LiveView).
Others have mentioned that Alpine has security concerns in LiveView - does Svelte have the same problem?
I’m not questioning the feasibility of LiveSvelte, but I’m wondering how niche (or how valuable) a LiveView/Svelte developer will be in the job market. I am currently focussing on Phoenix/LiveView development and this thread has made me take a good long look at Svelte.
Just want to say, this is a great library. Really good for dropping in Svelte components from npm.
Using it for complicated client side interactions + modals.
