LostKobrakai

LostKobrakai

PhoenixVite - Integrating the vite built tooling with phoenix

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]

https://github.com/LostKobrakai/phoenix_vite

Most Liked

LostKobrakai

LostKobrakai

I just published 0.4.0. The major themes of the updates have been

  • properly supporting nodejs (no zombie processes)
  • integrating with phoenix_live_reloads :notify feature
  • some optimizations to the generated vite config
  • support the release version of phoenix 1.8.0 and 1.8.1
  • fixing things up generally
Jskalc

Jskalc

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?
LostKobrakai

LostKobrakai

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.

Where Next?

Popular in Announcing Top

Qqwy
Hello everyone, I wrote a small library today called MapDiff. It returns a map listing the (smallest amount of) changes to get from map...
New
OvermindDL1
I created a new library (rather I pulled out a couple files from my big project), it manages an operating system PID file for the BEAM. ...
New
josevalim
Hi everyone, We would like to announce that Plataformatec is working on a new MySQL driver called MyXQL. Our goal is to eventually integ...
New
maltoe
Hello! Came here to announce ChromicPDF, a pet project PDF generator I’ve been working on for the past few months. Why another PDF gener...
New
dominicletz
Hi, I thought I had posted my library before but seems I hadn’t. The project is still in early stages but it’s growing and so I think it...
New
wojtekmach
Hey everyone! Req is an HTTP client for Elixir that I’ve been working on for quite some time. There is already a lot of HTTP clients out...
New
markmark206
simple_feature_flags is a tiny package that lets you turn features on or off based on which environment (e.g. localhost, staging, product...
New

Other popular topics Top

JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 54921 245
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New
axelson
This post is a wiki (feel free to hit the edit button near the bottom right of this post to add your own changes!) This post collects co...
239 49084 226
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID<0.412.0> terminating ** (Postgrex.Error) FATAL...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New
AstonJ
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
New

We're in Beta

About us Mission Statement