ExInertia - Toolkit for Phoenix + Inertia.js Integration with Bun and Vite

Looks awesome!

FYI your package can be installed without modifying the mix.exs file by anyone who already is using igniter with mix igniter.install exinertia and that’s the command we recommend to use when running installers as opposed to calling exinertia.install directly

Great work!

Thank you!

I actually wanted to contact you before I release this to get feedback about how I used Igniter.

For the installer part, I figured that since Igniter is relatively new, not a lot of people would be using it in their projects, and I aimed for having the users add only one dependency to get started.

But I’ll refine this moving forward to include your suggestion.

Ah, actually I just spotted this: exinertia/mix.exs at main · nordbeam/exinertia · GitHub

So one of the main reasons we suggest people work with igniter directly to install packages etc. is to ensure that igniter is a dev/test only dependency. Igniter depends on mix and having it as a production dependency causes issues.

So either exinertia itself needs to be a dev/test dependency, or it needs to make igniter an optional dependency. This lets end users list it as a dev/test dependency in their application.

Based on what it does I think either of those things is fine because exinertia doesn’t need to run in production for users right?

Small note, if you set only to only: [:dev, :test]in your installer’s info callback, then igniter will automatically install it with only: [:dev, :test], but only if installed via mix igniter.install exinertia

Thanks for the feedback! I’ve updated exinertia to make Igniter an optional dependency and modified the README to instruct users to install via mix igniter.install exinertia. This should help ensure Igniter remains a dev/test only dependency as intended.

Awesome! One small note is that mix igniter.install actually works even when igniter is not installed into a project, as long as igniter_new is installed as an archive.

So your instructions could be

# in your project directory
mix archive.install hex igniter_new
mix igniter.install exinertia

And then the user doesn’t have to manually edit even a single file

Thanks for creating this! I’ve been playing around with Inertia.js and Phoenix and have really been enjoying the experience. It was getting old having to go through all the same setup steps. I had a couple of questions:

1. Are there any changes you need to make to the Dockerfile that is created by mix phx.gen.release --docker? I tried to deploy my app to Coolify on a self-hosted VPS. My build keeps failing during the builder stage at RUN mix assets.deploy. Here is what I see in the debug log:

#22 [builder 12/17] COPY assets assets
#22 DONE 0.0s
#23 [builder 13/17] RUN mix assets.deploy
#23 0.771 Compiling 17 files (.ex)
#23 1.753 Generated test_exinertia app
#23 2.003 03:56:23.754 [debug] Downloading bun from https://github.com/oven-sh/bun/releases/download/bun-v1.2.1/bun-linux-x64.zip
#23 4.794 $ ../_build/bun x --bun vite build --minify
#23 4.806 Resolving dependencies
#23 5.309 Resolved, downloaded and extracted [128]
#23 5.371 Saved lockfile
#23 6.361 failed to load config from /app/assets/vite.config.ts
#23 6.361 error during build:
#23 6.361 undefined
#23 6.375 error: script "build" exited with code 1
#23 6.381 ** (Mix) `mix bun build --minify` exited with 1
#23 ERROR: process "/bin/sh -c mix assets.deploy" did not complete successfully: exit code: 1

It looks like the Vite.js config file can’t be found. When I used Svelte in a Phoenix + Inertia.js project, I had to install Node for the build stage to run npm install is the assets directory after it was copied. I wasn’t sure if I need to do something similar here. This is my first time using the Hex Bun package. I thought the Bun wrapper package eliminated the need to install any additional JavaScript tooling, but I might be mistaken.

2. I was curious why you created the PhxManifestReader module. When I was trying to setup Vite within a Phoenix project, I noticed other examples had set manifest: false in their vite.config.ts and put the output to match the assets folder used by Phoenix. Is there an advantage to reading those manifest files in this manner?

Thanks again for creating this toolkit! Everything seems to be working in dev right now. This was also my first time using Igniter and the ExInertia installation experience was sweet.

Hi!

I forgot to bun install when running mix assets.deploy, but I’ve fixed this with the 0.7 release.

As for the PhxManifestReader question, we use PhxManifestReader to dynamically read Vite’s generated manifest file, allowing Phoenix to reference the correct, hashed asset filenames in production.

This approach leverages Vite’s chunking and cache-busting optimizations in both development and production, simplifying asset management without needing to disable the manifest in Vite.

Is there any expplanation on what Inertia is, and why everyone seems to be so excited about it?

I can’t get head or tails of it from the websites, and all integrations (exinertia included) have no docs whatsoever on how you would use it

Inertia replaces your application’s view layer. Instead of using server-side rendering via PHP or Ruby templates, the views returned by your application are JavaScript page components. This allows you to build your entire frontend using React, Vue, or Svelte, while still enjoying the productivity of Laravel or your preferred server-side framework.
– How It Works - Inertia.js Documentation

I read that, too. And that means what exactly? I’ve always been able to build anything on the frontend using anything on the backend