Since I see more and more questions about setting up frontend tools for Phoenix 1.6 I’m gonna leave the links of two recent threads I’ve contributed to for posterity:
-
Tailwind + Esbuild setup (using the default Esbuild package): Phoenix 1.6.0 LiveView + esbuild + Tailwind JIT + AlpineJS - A brief tutorial - #12 by thiagomajesk
-
Bootstrap + Vite setup (works easily with Tailwind because of buit-in PostCSS & Esbuild support): A proof-of-concept integration of Vite.js (modern JS/assets bundler) with Phoenix + Liveview - #7 by thiagomajesk
After testing both approaches for some time I have to say that using Vite Js will be perfect if you just want things to work and forget about it.
PS.: Since Phoenix doesn’t make any assumptions of your frontend tooling, you basically just have to set up things like you would for any other framework out there. Perhaps the only difference is going to be the watcher configuration so you can get code-reload for your dev environment.
