Setting Up Phoenix with Inertia.js and Svelte :)

Learning Resources Guides/Tuts/Tips/Info
, ,
1

I recently got inertia-phoenix (an Inertia.js adapter for Phoenix) working with Svelte. Setting up the server-side rendering (SSR) with Svelte and esbuild was a little tricky so I made a repo with a detailed guide and example project so that I would remember all the steps for future projects.

Thought I’d share it here in case anyone else is trying to get the same setup going. :wink:

In addition to setting up Phoenix with Inertia and Svelte, the guide also includes a section for setting up several other JS tooling you may want when using Svelte, such as TypeScript, Prettier, ESLint, etc.

I’m definitely not an expert with esbuild setups, so please lmk if you see any mistakes or possible improvements! :pray:

14 Likes
2

does inertia-phoenix interrupt how live views are rendered?

3

When using Inertia, we’re rendering views from controllers as dead views so there is no interaction/conflict between Inertia and LiveView pages.

However, it is possible to render a LiveView in a dead view using live_render. And in this case, a potential conflict is if you do page navigation using Inertia. When I’ve tried this in the past, I got an unauthorized live_redirect error from LiveView.

Despite getting the error, the app still functionally works so I’m not sure whether it’s a false error that could somehow be avoided. I haven’t gotten the chance to look into it further though.

1 Like
4

Thanks for this! Super helpful and worked like a charm.

1 Like
5

Naive question: why would I pick inertia over liveview?
what would be the rationale?

3 Likes
6

Inertia.js allows for integration between client-side frameworks (React, Vue, Svelte) and server-focused ones (LiveView) so if you have somewhat complex client-side logic you may want to consider using it. I prefer LiveSvelte though.

If you’re using Svelte within your Phoenix LiveView app you can also call LiveView events as LiveView has really convenient JS interoperability.

2 Likes
7

I think the answer depends on a lot of things. :sweat_smile:

First, do you have a complex frontend where using a framework like React, Vue, or Svelte would be helpful? If so, you’ll need to decide whether to keep your backend and frontend separate (e.g., Phoenix + Next.js/Nuxt/SvelteKit/Astro) or use a monolithic Phoenix setup.

If you’re sticking with a Phoenix monolith and still want to use a frontend framework, the current options that support SSR (server-side rendering of JS components) that I know of are LiveSvelte, LiveVue, and Inertia.js.

Now, for choosing between LiveSvelte/Vue and Inertia.js: I haven’t used LiveVue, so I can only speak about LiveSvelte and Inertia.js. LiveSvelte is specific to Svelte, while Inertia.js is framework agnostic and can be used with React, Vue, or Svelte. LiveSvelte integrates closely with LiveView, which means it includes all of LiveView’s features, like automatic socket connections and rendering based on socket state changes.

In contrast, Inertia.js doesn’t integrate with LiveView. Instead, it hands off the entire frontend to your chosen frontend framework. It provides SPA-like routing similar to LiveView’s live navigation but without using a socket. For real-time features, you would need to set up your own socket and channels.

I find LiveSvelte offers tighter integration, making the developer experience simpler overall. However, there are some known SSR performance issues and specific challenges (related to making LiveView work in an offline app) that led me to try Inertia.js.

The Elixir Inertia.js adapter has experimental SSR support, and while it sometimes crashes in development, it falls back to non-SSR if it fails. I haven’t encountered SSR issues in non-dev environments. Not integrating with LiveView also avoids some of the offline-related problems I faced.

Both have their pros and cons. I really like LiveSvelte, but Inertia.js solves the specific problems I have better at the moment. That said, I don’t think the issues I have with LiveView and offline functionality are unsolvable—I just haven’t dug into them further since I wanted to try out Inertia.js. Inertia.js isn’t perfect either, but so far, everything seems to just work where it needs to in my current project.

Sorry for the long-winded response! I hope this helps answer your question!

6 Likes
8

Thank you for your comprehensive answer!

1 Like