DEV Community: Ahsan Abrar

Multi-Entrypoint SaaS Architecture with AdonisJS & Inertia + ReactJS

Ahsan Abrar — Tue, 21 Apr 2026 19:15:53 +0000

This guide explains how to build a scalable, multi-persona SaaS (Admin, Seller, Shop) using AdonisJS 7 and Inertia.js (React). This architecture ensures isolated bundles, distinct layouts, and full TypeScript safety.

1. Directory Structure

Organize your frontend assets by persona:

inertia/
├── app/
│   ├── admin.tsx        # Admin Entrypoint
│   ├── seller.tsx       # Seller Entrypoint
│   └── shop.tsx         # Shop Entrypoint
├── layouts/
│   ├── admin/           # Admin Layouts
│   ├── seller/          # Seller Layouts
│   └── shop/            # Shop Layouts
└── pages/
    ├── admin/           # Admin Pages
    ├── seller/          # Seller Pages
    └── shop/            # Shop Pages

2. Global Root View Configuration

Instead of manually setting the root view in every route, use a functional rootView in config/inertia.ts. This automatically selects the correct HTML shell based on the URL.

// config/inertia.ts
import { defineConfig } from '@adonisjs/inertia'

const inertiaConfig = defineConfig({
  rootView: (ctx) => {
    if (ctx.request.url().startsWith('/admin')) return 'admin'
    if (ctx.request.url().startsWith('/seller')) return 'seller'
    if (ctx.request.url().startsWith('/shop')) return 'shop'
    return 'inertia_layout' // Default
  },
  // ...
})

3. Entrypoint Definitions

Create dedicated entrypoints in inertia/app/. To keep TypeScript types working, we resolve pages from the root pages/ directory but wrap them in persona-specific layouts.

// inertia/app/admin.tsx
import { createRoot } from 'react-dom/client'
import { createInertiaApp } from '@inertiajs/react'
import { resolvePageComponent } from '@adonisjs/inertia/helpers'
import AdminLayout from '~/layouts/admin/AdminDefaultLayout'

const appName = 'Oribat | Admin'

createInertiaApp({
  title: (title) => (title ? `${title} - ${appName}` : appName),
  resolve: (name) => {
    return resolvePageComponent(
      `../pages/${name}.tsx`, 
      import.meta.glob('../pages/**/*.tsx'),
      (page) => <AdminLayout children={page} />
    )
  },
  setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />)
  },
})

4. Edge Root Views

Each persona needs its own .edge file in resources/views/ to load the specific Vite bundle.

{{-- resources/views/admin.edge --}}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title inertia>Oribat Admin</title>
  @viteReactRefresh()
  @vite(['inertia/app/admin.tsx'])
  @inertiaHead()
</head>
<body class="admin-theme">
  @inertia()
</body>
</html>

5. Vite Configuration

// vite.config.ts
export default defineConfig({
  plugins: [
    adonisjs({
      entrypoints: [
        'inertia/app/admin.tsx',
        'inertia/app/seller.tsx',
        'inertia/app/shop.tsx',
      ],
    }),
  ],
})

6. Defining Routes

Use the full component path (including the folder) in your routes. This ensures that AdonisJS TypeScript generators recognize the components correctly.

// start/routes.ts

// Admin Group
router.group(() => {
  router.get('/', async ({ inertia }) => {
    return inertia.render('admin/Dashboard', { stats: { ... } })
  })
}).prefix('/admin')

// Seller Group
router.group(() => {
  router.get('/', async ({ inertia }) => {
    return inertia.render('seller/StoreDashboard', { stats: { ... } })
  })
}).prefix('/seller')

7. Shared Props & Middleware

To share data (like the authenticated user) across all entrypoints, use the InertiaMiddleware. In AdonisJS 7, this middleware is where you define your global state.

// app/middleware/inertia_middleware.ts
export default class InertiaMiddleware extends BaseInertiaMiddleware {
  async share(ctx: HttpContext) {
    return {
      user: ctx.auth?.user,
      flash: ctx.session?.flashMessages.all(),
    }
  }
}

TypeScript Augmentation

To get autocomplete in your React components, augment the SharedProps interface:

declare module '@adonisjs/inertia/types' {
  export interface SharedProps extends InferSharedProps<InertiaMiddleware> {}
}

8. Title Management

Inertia takes over the title once the app loads.

Edge Fallback: Use <title inertia> in your .edge files for the initial loading state.
JS Branding: Set the appName and title callback in your .tsx entrypoint to control the browser tab branding.

Key Benefits

Bundle Optimization: Admins don't load customer-facing code, and vice versa.
Layout Isolation: No complex conditional logic needed in a single master layout.
Type Safety: Full auto-completion for component names and props across all entrypoints.
Theme Control: Different CSS classes (e.g., admin-theme) can be applied to the body at the Edge level.

How to Setup Tailwind CSS v4 & shadcn/ui in AdonisJS v7 (React + Inertia)

Ahsan Abrar — Thu, 12 Mar 2026 13:03:55 +0000

In this guide, I'll show you how to combine these powerhouses with Inertia.js, React, and the latest shadcn/ui to create a world-class development environment.

Why This Stack?

AdonisJS v7: A robust, opinionated backend that handles Auth, Databases (Lucid ORM), and Validation out of the box.
Inertia.js: The "secret sauce" that lets you build SPAs using classic server-side routing.
Tailwind v4: A lightning-fast, Rust-powered engine that moves configuration from JS files directly into your CSS.
shadcn/ui: Beautiful, accessible components that you own and can fully customize.

Step 1: Install Tailwind CSS v4 (Stable)

Tailwind v4 is now the stable standard. It integrates directly with Vite, so we no longer need postcss.config.js or tailwind.config.js.

In your AdonisJS project root, install the core engine and the Vite plugin:

npm install tailwindcss @tailwindcss/vite

Step 2: Configure the Vite Plugin

AdonisJS v7 uses Vite by default. We need to register the Tailwind v4 plugin in vite.config.ts and wire it up to the Inertia frontend that lives in the inertia directory.

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import adonisjs from '@adonisjs/vite/client'
import inertia from '@adonisjs/inertia/vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
    react(),
    inertia({ ssr: { enabled: false, entrypoint: 'inertia/ssr.tsx' } }),
    adonisjs({
      entrypoints: ['inertia/app.tsx'],
      reload: ['resources/views/**/*.edge'],
    }),
  ],
  resolve: {
    alias: {
      '@': `${import.meta.dirname}/inertia`,
      '~/': `${import.meta.dirname}/inertia/`,
    },
  },
  server: {
    watch: {
      ignored: ['**/storage/**', '**/tmp/**'],
    },
  },
})

Step 3: Prepare the CSS Entrypoint

In v4, your CSS file is the "source of truth." Open inertia/css/app.css and add the following:

@import 'tailwindcss';

/* Configuration happens here instead of a JS file */
@theme {
  --font-sans: 'Inter', ui-sans-serif, system-ui;
}

Step 4: Initialize the Latest shadcn/ui

Now that the styling engine is ready, we can bring in shadcn. The latest CLI automatically detects Tailwind v4 and your TypeScript aliases.

Run the init command (for a Vite-powered Adonis/Inertia frontend):

npx shadcn@latest init -t vite

Recommended CLI Responses for AdonisJS + Inertia:

Prompt	Answer
Component library	Radix
Preset	Nova
Global CSS	`inertia/css/app.css`
Import alias for components	`@/components`
Import alias for utils	`@/lib/utils`

Note: Since your React files live in the inertia directory, shadcn will generate components into inertia (e.g. inertia/components/ui) and inject its design tokens (colors, border-radius) directly into inertia/css/app.css under the @theme or @layer base blocks.

Step 5: Verify Path Aliases

To ensure your React components can find the UI library, your root tsconfig.json must match the aliases defined in Vite and point to the inertia directory:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./inertia/*"]
    }
  }
}

Step 6: Create Your First Component

Let's add a button and use it in an Inertia page.

1. Add the component:

npx shadcn@latest add button

2. Use it in a Page (inertia/pages/home.tsx):

import { Button } from '@/components/ui/button'
import { Head } from '@inertiajs/react'

export default function Home() {
  return (
    <>
      <Head title="Adonis + shadcn" />
      <div className="flex flex-col h-screen items-center justify-center gap-4 bg-background text-foreground">
        <h1 className="text-3xl font-bold">The 2026 Stack</h1>
        <p className="text-muted-foreground text-lg">AdonisJS v7 + React + Tailwind v4</p>
        <Button size="lg">Ready to Build</Button>
      </div>
    </>
  )
}

Troubleshooting & Tips

Order Matters: Always install Tailwind v4 before running shadcn init. The CLI needs to see Tailwind in your package.json to configure itself correctly.
No Config? If you're looking for tailwind.config.js, remember: in v4, you don't need it! Use the @theme block in app.css to add custom colors or spacing.
Icon Library: shadcn uses lucide-react by default. If you encounter an error, run npm install lucide-react.

Conclusion

You now have a powerhouse setup. AdonisJS handles the heavy lifting on the server, while React, Tailwind v4, and shadcn provide a professional, lightning-fast UI layer.

By removing the friction of complex configuration files, this stack lets you focus on what actually matters: building your product.