PhoenixVite - Integrating the vite built tooling with phoenix

Your Libraries & OS Mentoring Libraries
, , ,
1

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

mix phoenix_vite.install [--bun]

or all in one using

mix igniter.install phoenix_vite [--bun]

or from scratch

mix igniter.new my_app --with phx.new --install phoenix_vite [--bun]

32 Likes
2

Thank you for this @LostKobrakai!

LiveVue relies heavily on Vite, but installation instructions are long and discourage trying it out (even 3min setup is too much for many :joy:).

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:

  1. When working on my installation process I’ve stumbled upon a problem with Vite configured to do chunk splitting. Eg:
defineAsyncComponent(() => import('@assets/vue/components/MarkdownBlock.vue'))

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.

  1. LiveVue extends vite dev server to also do efficient SSR during development, and handle some corner cases about hot updates (if I recall, it was about css and js). Do you think it would make sense to add it to your library?
3 Likes
3

This does the same. The vite manifest is the source of truth and is used to provide information to phoenix. phx.digest is not used.

2 Likes
4

@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

1 Like
5

Interesting. I ended up DIYing alongside our over-eager AI friends. Works really well and, with inertia, means we can rapidly vibe code our admin.

1 Like