Ostap's Blog 📡

Preact with Inertia Phoenix

•
, ,
• 1 min read

Out-of-the-box, inertia-phoenix offers a great React installer:

mix archive.install hex igniter_new
mix igniter.install inertia --client-framework=react --typescript

Now, there are only 3 steps left to start using Preact in this project:

  1. Install Preact
npm install preact && npm remove react-dom react
  1. Register paths in tsconfig:
{
  "compilerOptions": {
    // ...
    "paths": {
      "react": ["./node_modules/preact/compat/"],
      "react/jsx-runtime": ["./node_modules/preact/jsx-runtime"],
      "react-dom": ["./node_modules/preact/compat/"],
      "react-dom/*": ["./node_modules/preact/compat/*"]
    }
  1. Register aliases in in config.exs esbuild flags
- js/app.jsx ... 
+ js/app.jsx --alias:react=preact/compat --alias:react-dom=preact/compat ...

Note: while Inertia.js doesn’t provide a dedicated Preact client, the regular React client works well under Preact’s compatibility mode.

Happy MPA+SPA-ing 🙂 ✌️