Skip to content

Implement SSR adapter abstraction#44

Open
andresgutgon wants to merge 2 commits intoinertiajs:mainfrom
andresgutgon:feature/inertia-vitejs-integration
Open

Implement SSR adapter abstraction#44
andresgutgon wants to merge 2 commits intoinertiajs:mainfrom
andresgutgon:feature/inertia-vitejs-integration

Conversation

@andresgutgon
Copy link
Copy Markdown

@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
Copy Markdown
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
Comment thread 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
Copy Markdown
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
Comment thread .circleci/config.yml
- checkout
- run: mix --version
- run: node -v
- run: npm -v
Copy link
Copy Markdown
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
Copy Markdown
Author

andresgutgon commented Apr 16, 2025

@derrickreimer can you review this PR? 🙏

@derrickreimer
Copy link
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
Author

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

* upstream/main:
  Fix alias ordering
  Use consistent page_name and previous_page naming
  Fix since tag
  Add support for Scroll props
  Add Once props section to README
  Update CHANGELOG.md
  Add support for Once props
  More helpful prop names for testing behavior
  Fix camelization of keys in deferredProps metadata
  Update CHANGELOG.md
  Update CHANGELOG.md
  run format
  fix wording
  update pages directory in next steps instructions
  add create_pages_directory step
@andresgutgon andresgutgon force-pushed the feature/inertia-vitejs-integration branch from a114aa7 to aeaba85 Compare December 31, 2025 17:29
@andresgutgon
Copy link
Copy Markdown
Author

Hi, it's me again 😅. Happy 2026 @derrickreimer I hope this year is the year of Inertia adapter 💪

@vonagam
Copy link
Copy Markdown

vonagam commented Apr 2, 2026

Just noting that I have used the intertia from this PR plus @andresgutgon's vitex (thought the package would need a name change since there is now other vitex published) and phoenix_vite on back with latest versions of vite/typescript/vue/inertiajs (including it's @inertiajs/vite package) on front. Everything worked for me.

Noting that in this PR there is a mention of ssr_adapter option for intertia config - but it's never read in the code. Right now it's only possible to set adapter by Inertia.SSR spec opts.

@andresgutgon
Copy link
Copy Markdown
Author

andresgutgon commented Apr 3, 2026

Just noting that I have used the intertia from this PR plus @andresgutgon's vitex (thought the package would need a name change since there is now other vitex published)

Yeah, I have pending choosing the name after this is merged he he

Noting that in this PR there is a mention of ssr_adapter option for intertia config - but it's never read in the code. Right now it's only possible to set adapter by Inertia.SSR spec opts.

In main there is no concept of SSR adapter. After this PR in the future someone will be able to plug a Bun or Deno adapter for example. For now what was working keep working which is the existing Inertia.SSR.Adapters.NodeJS

@vonagam
Copy link
Copy Markdown

vonagam commented Apr 4, 2026

After this PR in the future someone will be able to plug a Bun or Deno adapter for example.

Right, I'm noting that PR adds description for ssr_adapter config option without implementing it. Right now (in this PR) it is only possible to set an adapter directly though a child spec. (Which reduces usability a bit since the idea is to use different adapters in dev and prod.) And implementing the config option won't change the default (from nodejs), so I don't understand why config option is not read in this PR.

@andresgutgon
Copy link
Copy Markdown
Author

andresgutgon commented Apr 5, 2026

I don't understand why config option is not read in this PR.

It's been a year since i implemented this code but i think is used. Just that only existing nodejs implementation was converted in the only and default ssr adapter. After this is meeged other people could bring another adapters.

it's used in bootstrap.ex

@vonagam
Copy link
Copy Markdown

vonagam commented Apr 5, 2026

it's used in bootstrap.ex

There is no call to read the application config, in Bootstrap it gets adapter from opts passed to process child spec (the init option is also called ssr_adapter, which is reasonable).

@andresgutgon
Copy link
Copy Markdown
Author

andresgutgon commented Apr 5, 2026

There is no call to read the application config, in Bootstrap it gets adapter from opts passed to process child spec (the init option is also called ssr_adapter, which is reasonable).

Here the config is read https://github.com/inertiajs/inertia-phoenix/pull/44/changes#diff-dba29715f803cdaa6aa99dad1320eb56ece773bbac53640e0adc5ee5a3b036f9R10-R15 and here that custom SSR adapter is invoked https://github.com/inertiajs/inertia-phoenix/pull/44/changes#diff-03cd03cff821332cd979084df8dcc112045f5f17836f9046612315f8e6c1861aR15-R16

Probably I'm not following your concern.

I wanted this to enable Vite development which is industry standard today and that for sure is working. I'm ussing ssr_adapter like this
https://github.com/andresgutgon/ash_learning/blob/main/config/runtime.exs#L26-L29

@vonagam
Copy link
Copy Markdown

vonagam commented Apr 5, 2026

There is an application config. It is defined in config/config.exs, config/dev.exs and so on. It is read through Application.get_env/Application.fetch_env/Application.compile_env. This PR adds information to Readme that there is now a new application config option under config :inertia called ssr_adapter that allows to specify an adapter. But there is nowhere in the code that this config is read.

There are a child spec opts that get passed to start_link and init. This PR supports and reads ssr_adapter from those opts on the lines that you've linked. It is a separate concept from application config.

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.

3 participants