Frontend

Inertia.js Integration

The Modern Monolith. Build single-page apps without building an API. Seamlessly connect your React/Vue/Svelte frontend with your CanxJS backend.

Modern Monolith

Build SPAs using classic server-side routing and controllers.

No API Required

Pass data directly to components. No REST/GraphQL needed.

Shared Data

Share data like Auth logic automatically across all pages.

Asset Versioning

Automatic reload when assets change.

Configuration

Configure the root view and shared data in your app config.

src/config/app.ts

1// src/config/app.ts
2export const config = {
3  // ...
4  inertia: {
5    rootView: 'app', // views/app.tsx or views/app.ejs
6    shared: (req) => ({
7      auth: {
8        user: req.user,
9      },
10      flash: {
11        success: req.session.get('success'),
12        error: req.session.get('error'),
13      }
14    }),
15  }
16};

Server-Side Usage

Return Inertia.render from your controllers.

src/controllers/DashboardController.ts

1// src/controllers/DashboardController.ts
2import { Controller } from "canxjs/controller";
3import { Inertia } from "canxjs";
4
5export class DashboardController extends Controller {
6  @Get("/")
7  async index() {
8    // Render the "Dashboard" component with props
9    return Inertia.render("Dashboard", {
10      stats: {
11        users: 100,
12        revenue: 5000
13      }
14    });
15  }
16}

Client-Side Usage

Initialize the Inertia app in your frontend entry point.

resources/js/app.tsx

1// resources/js/app.tsx (React)
2import { createInertiaApp } from '@inertiajs/react';
3import { createRoot } from 'react-dom/client';
4
5createInertiaApp({
6  resolve: name => {
7    const pages = import.meta.glob('./Pages/**/*.tsx', { eager: true });
8    return pages[`./Pages/${name}.tsx`];
9  },
10  setup({ el, App, props }) {
11    createRoot(el).render(<App {...props} />);
12  },
13});

Combine with Vite

Inertia works best with Vite for lightning fast HMR.