Skip to content

Conversation

@andresgutgon
Copy link

@andresgutgon andresgutgon commented Mar 29, 2025

What?

Now, the only way of running JS code on Elixir is using NodeJS call, but there are other ways of executing JS, for example, using Bun runtime or, in development, rendering the inertia app using a VideJS dev server. These changes allow users to hook into Inertia's SSR system and use their own adapters.

TODO

  • Keep it simple for existing users. It should be totally transparent
  • Setup vite plugin for handling HMR on the backend
  • Generate JS/CSS assets based on the ViteJS manifest
  • Being able to use ESM modules for compiled javascript
  • Fix credo ✅
  • Fix dyalizer errors ✅
  • Make all tests pass ✅
  • Use these changes in my app 🚀
  • Make using a ViteJS setup in dev and prod easy. Bring ViteJS helpers in another package

Adapters

Coming from this conversation and with @Valian advise I wanted to give a try to complete integration between inertia-phoenix and ViteJS as js bundler .
The idea is to use a ViteJS adapter during development and use existing NodeJS call in production


TO BE DISCUSSED

I know you’ve shared your thoughts on this before, @derrickreimer — and I really appreciate your perspective. I hate to bother you with this again, but I’d truly love to bring the Vite experience into working with Inertia + Phoenix.

If I can manage to pull this off in a clean and maintainable way, and if you feel it aligns with the goals of the project, I’d be honored to contribute it. Totally up to you, of course — just wanted to put it out there. 🙏

@andresgutgon andresgutgon changed the title [WIP] Implement development adapter for ViteJS as frontend bundler [WIP] Implement development adapter for ViteJS Mar 29, 2025
@derrickreimer
Copy link
Collaborator

Appreciate the effort, @andresgutgon.

I'm not fundamentally opposed to having multiple adapters for different front-end build systems. If the past is any indication, I don't expect tool churn in the JavaScript world to slow down anytime soon 😅 . So it's reasonable for this library to not be overly opinionated about what people should use when the JS-bundling flavor of the week changes.

I'll need to give it more thought, but it might make sense to put these adapters into separate packages to keep bloat to a minimum.

In the meantime though, I still encourage folks to really consider if you need more than the simple esbuild setup we have baked in!

@andresgutgon andresgutgon changed the title [WIP] Implement development adapter for ViteJS [WIP] Implement SSR adapter abstraction Apr 5, 2025
@andresgutgon andresgutgon force-pushed the feature/inertia-vitejs-integration branch 2 times, most recently from 4b0521f to f5d20fb Compare April 6, 2025 17:38
@andresgutgon andresgutgon changed the title [WIP] Implement SSR adapter abstraction Implement SSR adapter abstraction Apr 6, 2025
@andresgutgon andresgutgon force-pushed the feature/inertia-vitejs-integration branch 9 times, most recently from 1e2e542 to 5c557d3 Compare April 13, 2025 09:54
README.md Outdated

### Custom SSR adapter

You can setup your own SSR adapter. For example [vitex](https://github.com/andresgutgon/vitex) is a package that helps with ViteJS development in Phoenix apps. It has a custom SSR adapter for this package (inertia-phoenix) so SSR can be handle in development through Vite Dev server instead of calling a NodeJS process like we do in production.
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@derrickreimer you commented that maybe would be better if adapters lived outside the Inertia package. And I think I really like this approach because I want to add Vite assets management and that would be too much to put in inertia.

@andresgutgon andresgutgon force-pushed the feature/inertia-vitejs-integration branch from d97e601 to dc4ec83 Compare April 13, 2025 17:50
- checkout
- run: mix --version
- run: node -v
- run: npm -v
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While adding a test for supporting ESM I saw that
Elixir 15 -> nodejs 18.x
Elixir 16 -> nodejs 20.x

18 is about to lose LTS on 30th of April and 20 next year

@andresgutgon
Copy link
Author

andresgutgon commented Apr 16, 2025

@derrickreimer can you review this PR? 🙏

@derrickreimer
Copy link
Collaborator

@derrickreimer can you review this PR? 🙏

I'm in a pretty busy season at the moment, but I'll do my best to take a look at this soon.

@andresgutgon
Copy link
Author

Okay, I did the last thing I wanted to do. I created an example repo app using my changes but with the standard Inertia setup explained in the README.

https://github.com/andresgutgon/inertia_ssr_adapters

I won't comment more here 🙏. I'll keep moving with my life 😃

@andresgutgon
Copy link
Author

Hey @derrickreimer, hope you’re doing well!

Would you have a chance to review this soon? I’m working off my own fork at the moment, but I noticed you’ve merged some new changes and I’d much rather switch back to using the official package instead of maintaining my own branch.

It’s been a while since I started on this, but I put a lot of thought into the changes. I tried to keep things as non-disruptive as possible for existing users and added tests as well. I’m happy to adjust anything that needs improving—just let me know.

Thanks for taking a look!

@andresgutgon andresgutgon force-pushed the feature/inertia-vitejs-integration branch from ee05419 to 3c797ee Compare June 29, 2025 07:59
@andresgutgon
Copy link
Author

Btw, I noticed Inertia didn't compile unless I add Igniter to my Phoenix mix.exs file. Is that expected?

I see a note in the readme on how to get started with an Inertia project with Igniter, but maybe add a line telling that now Igniter has to be added as a project dependency

@derrickreimer
Copy link
Collaborator

Btw, I noticed Inertia didn't compile unless I add Igniter to my Phoenix mix.exs file. Is that expected?

I see a note in the readme on how to get started with an Inertia project with Igniter, but maybe add a line telling that now Igniter has to be added as a project dependency

D'oh! Nope it's supposed to be optional, I pushed a fix out.

Would you have a chance to review this soon? I’m working off my own fork at the moment, but I noticed you’ve merged some new changes and I’d much rather switch back to using the official package instead of maintaining my own branch.

Yeah, thanks for your patience here. This is a big enough structural change that I want to be sure to put enough thought into architectural decisions before merging. I'll try to put some time into it soon!

Now the only way of running JS code on Elixir is using NodeJS call but
there are other ways of executing JS like for example using Bun runtime
or in development rendering the inertia app using VideJS dev server.
This changes allow users to hook into inertia's ssr system and use their
own adapters.
@andresgutgon andresgutgon force-pushed the feature/inertia-vitejs-integration branch from 3c797ee to 3b86815 Compare June 29, 2025 13:46
@andresgutgon
Copy link
Author

Super quick fix! 👏

Don't worry, I understand this change can break things. Take your time. It's just that I want to ship this. I think it would be a good addition. Also, I'm quite proud of it. I learned a lot!

@andresgutgon
Copy link
Author

Hi @derrickreimer, it's me again 🙏 I hope you're doing well. Did you have a chance to take a look at these changes?

@derrickreimer
Copy link
Collaborator

Hi @derrickreimer, it's me again 🙏 I hope you're doing well. Did you have a chance to take a look at these changes?

Apologies, I've not had a chance yet.

@andresgutgon
Copy link
Author

Ok, thanks, Derrick, for the quick response. appreciate

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants