How to integrate Phoenix 1.6 with vue and esbuild

[woohaaha]

Hi @noargs

I did some research on this when 1.6 was announced and came across some discussion about how esbuild can’t work with vue so easily (insert hand waving here). Continuing the search I found mention that ViteJS (which uses ESBuild internally) could be an option.

Here is a thread about how to add ViteJS to Phoenix 1.6:

A proof-of-concept integration of Vite.js (modern JS/assets bundler) with Phoenix + Liveview

I have an important update on this solution: It seems that there was some sort of regression and the provided solution to prevent zombie processes doesn’t work anymore (details here and here). If you are still having problems where Vite is leaving orphan processes behind, try changing your setup to use a wrapper script instead. The main idea is explained in the docs here: Port — Elixir v1.12.0-rc.0. # mix.exs alias for asset deploy... # If your deploy process uses docker you can simply use npx…

I’ve seen @thiagomajesk in a few threads about this and I suspect his insights would be very helpful.

Please keep us posted as to how it goes. Was it easy to integrate? Any issues in production? How was the deployment process? Yada yada yada