[Question] Setting up the client side for a phoenix application

[incompetent-coder]

Hey, sorry if this isn't the best place to ask. I'm just trying out various inertia packages for phoenix.

I'm just wondering, do you guys use esbuild that comes preinstalled in a phoenix application? And if so, how do you configure the client side part of inertia with it? Particularly around dynamically importing of the pages.

[derrickreimer]

Hey @incompetent-coder! Good question. Trying to get dynamic imports working with esbuild proved a bit too magical for our taste, so we settled on explicit imports like this:

import { MyPage } from './pages/my-page';

const pages = {
  MyPage: MyPage
}

createInertiaApp({
  resolve: (name) => {
    return pages[name];
  },
  setup({ App, el, props }) {
    createRoot(el).render(<App {...props} />);
  },
});

[derrickreimer]

Also, we haven't published this to Hex yet (contrary to what the README indicates 😅), but you use git to install it:

{:inertia, git: "https://github.com/svycal/inertia-phoenix.git"}

Sorry about the lack of docs! We are using this in production though, so it should be in pretty good usable shape.

[andresgutgon]

Oh! I'm trying recommended path in README with esbuild to test the changes in here

Is this still the case? 😅
GPT has been 15 minutes suggesting the static page mapping 😂

[derrickreimer]

Nope, the README should be up to date: https://github.com/inertiajs/inertia-phoenix?tab=readme-ov-file#setting-up-the-client-side

I believe you have to be on esbuild >= 0.19 to do dynamic imports, as noted in the README.