I’ve recently created a small library phoenix_vite integrating the vite build tooling with phoenix.
It
provides an igniter.installer to install all the necessary files
creates elixir and js boilerplate
configures phoenix LV static file tracking with the manifest vite generates
uses phoenix static_url configuration to handle all static assets via the vite dev server
moves static assets from priv/static to assets/public
provides a heex function component to pull in js/css from
vite dev server in development
the vite manifest in prod
can optionally pull in :bun to run without a locally installed nodejs, just like phoenix does by default
When used with :bun this should provide a setup that’s as “working out of the box” as the default phoenix boilerplate, but including package managing as well as an very flexible and extensible build system.
The installer could likely use a bit more work around the failure cases, but it works for fresh phoenix 1.7/1.8 projects.
You can install the package by adding it to your mix.exs and running
LiveVue relies heavily on Vite, but installation instructions are long and discourage trying it out (even 3min setup is too much for many ).
I started working on Igniter installer but didn’t had the time to finish. Your library seems like a solid foundation to build upon. I will give it a shot later this week and hopefully I could include phoenix_vite in the next version!
Two questions:
When working on my installation process I’ve stumbled upon a problem with Vite configured to do chunk splitting. Eg:
might create a separate chunk. Then, code of that chunk will try to import shared parts from app.ts, because these chunks doesn’t know about phoenix manifest. So we’ll end up with two app.ts files loaded, one hashed by phoenix and one not.
My solution was not to use phoenix manifest file, instead use vite hashing. It was also important when generating preload directives for SSR, since when doing SSR with Vite it’s using chunk names from vite manifest.
I’m pretty sure some interoperability can be reached between these two manifests - adjusting one manifest to use file names from the other one. But it felt like a rabbit hole at a time.
@LostKobrakai thanks for the great work! thanks to your project, I will finally be able to transfer Phoenix + Inertia projects to vite. I’ll leave an example in repository for the future. SSR is still a work in progress, but I’m quite happy with the current result