Eiji
Hi, I wonder if currently it’s possible to have a pretty non standard setup.
Related topic:
In this case I’m thinking about:
Phoenix-based API-only backendSvelte-based CSR, scoped style and script in svelte file and load on demand frontend SPA with a little help of something like routifyautoprefixerandSASS/SCSSsupport for simplicity if possible- also if possible I would like to avoid
nodeandwebpackif they are not necessary
I don’t need any Tailwind as well as any extra npm package. I’m considering a custom GUI using above setup
@greven Your response especially took my attention. Could please let me know if such build is possible and if so what I need to do to make it work? I’m not scared to work on custom tasks/hex package, so if it’s needed then could you please let me know what steps I need to follow (like download or compile something) in order to get final binary like the esbuild one in newly generated Phoenix project?
If something from above does not makes sense I would like to know why. I know that I’m new in this field who just heard some nice keywords about svelte and simply wants it to be a part of the app. Obviously I’m not asking for a sample project, but just for a step-by-step guide.
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Master modern tools, write cleaner code, and tackle real-world challenges with Manning books, videos, and courses. Start building today.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #ai
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #elixirconf-eu
- #metaprogramming
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 10- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
greven
Hey.
In your description you say Phoenix based API, so a REST or GraphQL backend. With this you are decoupling the backend from the frontend, and therefore Phoenix doesnt care what you use for your assets, esbuild, SASS, etc. You will need to check SvelteKit docs on how to setup that (tho I think it comes with support for SASS out of the box as it uses Vite).
The routing would be done by Svelte so there isn’t any integration you would need to do between both frameworks. This assuming you want to use SvelteKit.
On the other hand if you just want to use plain Svelte, without SSR, check this: GitHub - woutdp/live_svelte: Svelte inside Phoenix LiveView with seamless end-to-end reactivity · GitHub
Eiji
As in original post I want to fetch
sveltefiles on demand and useCSRinstead ofSSRas the frontend is just supposed to use the API and render everything as SPA.I have already tried running
sveltestandalone, but I really don’t understand why, when we haveesbuildbinary, we need to go fornode,webpackand even extra server just to serve assets?. If remember correctly currentElixirhex packages forsvelteare adding some kind ofloaderforsveltefiles inbuild.js.I was trying to find if it’s possible and how to make an
esbuildbinary that simply can loadsveltefiles just like it do forcssandjsones.Maybe in a bit different words … Here is what I would like to have:
GETon some routePhoenixis sending back simpleHTMLreply (either by small plug or simplest controller)HTMLin point 2 load themain.css(i.e. layout, variables etc.) andmain.jsorsveltefilemain.jsorsveltefile (on client side) callsAPIto fetch a record and renders it in lazy loaded some (depending on routing)sveltefileSo for example:
GET /posts/:id200 OKwith content<!doctype html><html>…</html>(with head, body, style and script)XMLHttpRequest:GET /api/posts/:id.json/assets/svelte/pages/post_show.svelteand renders it using specific data from point 3sveltefile then fetches on demand components files:/assets/svelte/components/header.svelteIt would be just perfect if I would be able to secure on
Phoenixside/assets/svelte/admin/**/*.sveltewith some custom plug that uses a user’s session tokenSo far the other solutions I’m aware of:
svelteapp (working on other port)build.jsfileLet me know if I have missed anything.
greven
Regarding the routing, if you are doing the routing on the Phoenix side, since you mention you want just CSR, you would need to fetch the .svelte file on each route, either manually (through a controller, since you would need to mount the svelte file on each route) or through writing a custom plug to do it for your (and integrate the user’s session too). I haven’t used that solution as since I have moved to Phoenix land, I’ve been using LiveView exclusively.
What you are describing is pretty close to what InertiaJS does.
Regarding making esbuild serve svelte files that is an issue with esbuild itself as it can only serve most common file types out of the box, other file types it needs the equivalent of a loader (like Webpack), in the case of esbuild a plugin. Since this is a custom plugin (there must exist one for sure?), if you don’t want to use node to fetch the deps with npm, simply put it in a vendors folder and manually include it in your custom esbuild build.js entry file.
03juan
Adding to this, a combination of GitHub - EMH333/esbuild-svelte: An esbuild plugin to compile Svelte components · GitHub building the components separately to
priv/static/assetsand then something like this from client side? Svelte Navigator - Lazy Loading • Playground • SvelteEiji
So you described pretty nice what I had in mind. I was thinking that I would need 2 plugs:
200 OKwith the baseHTMLcode/errors/unauthorizedroute that could later be handled bysveltecomponent.Close, yes. However it’s adding an extra unnecessary layer. Better or worse I would handle
svelteside, but I was rather asking what’s the best way to configure it withesbuild.Ah, so after all the
build.jsis required as there is no way foresbuildto be compiled and used (like in taskinstall_and_run) withsvelteloader support, right?Simple
npm installand otherdevstuff are of course not a problem. I’m not asking to fetch all dependencies manually, but I’m searching for a guide that does not requires it inprodenvironment.@03juan Ok, so this configuration does not require
webpack.One question … Does this configuration:
https://github.com/EMH333/esbuild-svelte/blob/1643aa0aed6e08b49dcbefb121821b46bb880efa/example-js/package.json
require a
nodeinprodenvironment or it’s just used in build process before deploy the assets?btw. The
fsinbuildscript.jsis a part ofnode, right? Since I would work with it inPhoenixproject I don’t needfspart, so thenodeis called here just to runesbuildand it’sloader, right? If so that would be a configuration I’m looking for since binary-only solution would not work.bdarla
Apologies for intervening in this discussion without having to contribute in the original question. I am wondering which may be the reasons/requirements for selecting Svelte over Liveview, if these can be shared in this forum.
03juan
I haven’t tried this, just ran across these links that I though would be relevant, but assume it would be tied in through implementing the Esbuild plugins example scripts in the Phoenix documentation.
greven
Depends on your workflow, you could built all the files in dev and digest them and don’t need node at all in prod or you might decided to build the assets in prod. Normally it’s part of your deployment process, now if you run that in a CI or in the prod VPS is up to you.
Eiji
No worries, simply you use:
LiveViewfor simplicity (99%Elixircode + 1% Hooks)svelteSPA when you want to make your API as fast as possibleIn 2nd point the server does not takes the resources for:
In short we move most of work on server or client to provide lightweight apps (LiveView) or fast apps (svelte) as the communication between client and server is limited to data and currently the clients i.e. desktops and mobiles have enough power to not slow down page.
btw. This was already covered in some topic.
Eiji
Yes, exactly I had that in mind. Most probably I would deploy from
Virtual Machinethat have same distribution likeprodserver.