Skip to content

Client-side Setup

This guide assumes you've already read the Project Structure Basics.

This document will guide you through the setup of the Preact framework adapter.

Preperation

  1. In the project root, rename vite.config.js to vite.config.ts.
  2. In the project root, create a tsconfig.json file.
  3. Delete the resources/js directory.
  4. Create the resources/application directory.
  5. Create the resources/pages directory.

Installation

Install the Inertia.js-Revamped Preact framework adapter:

shell
npm install --save-dev @inertiajs-revamped/preact
shell
pnpm add -D @inertiajs-revamped/preact
shell
yarn add -D @inertiajs-revamped/preact
shell
bun add -D @inertiajs-revamped/preact

Configuration

Setup package.json

The following dependencies should be included in the package.json setup.

Server-side Rendering (SSR)

Update the build command, to include client-side and server-side bundles (optional).

json
{
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build", 
    "build": "vite build && vite build --ssr", 
    "preview": "vite preview"
  },
  "devDependencies": {
    "@inertiajs-revamped/preact": "^0.0.6",
    "@types/node": "^20.14.1",
    "@preact/preset-vite": "^2.8.2",
    "axios": "^1.7.2",
    "laravel-vite-plugin": "^1.0.4",
    "preact": "^10.22.0",
    "preact-render-to-string": "^6.5.4",
    "typescript": "^5.4.5",
    "vite": "^5.2.12"
  }
}

Setup tsconfig.json

The following tsconfig.json setup can be used as a starting point.

json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "verbatimModuleSyntax": true,
    "allowSyntheticDefaultImports": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "types": ["node", "vite/client"]
  },
  "include": ["resources/**/*"],
  "exclude": ["public", "node_modules", "vendor"]
}

Setup vite.config.ts

Add the code below to the vite.config.ts to provide a minimum configuration.

typescript
import preact from '@preact/preset-vite'
import laravel from 'laravel-vite-plugin'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    laravel({
      /** Main entrypoint */
      input: ['resources/application/main.tsx'],
      /** SSR entrypoint (optional) */
      ssr: 'resources/application/ssr.tsx',
      refresh: true,
    }),
    preact(),
  ]
})

Initialize the main entry

Create resources/application/main.tsx and initialize the main entry-point (no SSR).

tsx
import { createInertiaApp, resolvePageComponent } from '@inertiajs-revamped/preact'
import { createProgress } from '@inertiajs-revamped/preact/progress'
import { render } from 'preact'

createInertiaApp({
  title: (title) => `${title} - Starter kit`,
  resolve: (name) =>
    resolvePageComponent(
      `../pages/${name}.tsx`,
      import.meta.glob('../pages/**/*.tsx')
    ),
  setup({ el, App, props }) {
    render(<App {...props} />, el!)
  },
  progress: () =>
    createProgress({
      color: '#4B5563',
    }),
})

Server-side Rendering (SSR)

Initialize the SSR entry

Create resources/application/ssr.tsx and initialize the server entry-point.

tsx
import { createInertiaApp, resolvePageComponent } from '@inertiajs-revamped/preact'
import { createServer } from '@inertiajs-revamped/preact/server'
import renderToString from 'preact-render-to-string'

createServer((page) =>
  createInertiaApp({
    page,
    title: (title) => `${title} - Starter kit`,
    render: renderToString,
    resolve: (name) =>
      resolvePageComponent(
        `../pages/${name}.tsx`,
        import.meta.glob('../pages/**/*.tsx')
      ),
    setup: ({ App, props }) => <App {...props} />,
  })
)

Update the client entry

To enable client-side hydration in a Preact app, update your main.tsx file.

tsx
import { createInertiaApp, resolvePageComponent } from '@inertiajs-revamped/preact'
import { createProgress } from '@inertiajs-revamped/preact/progress'
import { render } from 'preact'
import { hydrate } from 'preact'

createInertiaApp({
  title: (title) => `${title} - Starter kit`,
  resolve: (name) =>
    resolvePageComponent(
      `../pages/${name}.tsx`,
      import.meta.glob('../pages/**/*.tsx')
    ),
  setup({ el, App, props }) {
    render(<App {...props} />, el!) 
    hydrate(<App {...props} />, el!) 
  },
  progress: () =>
    createProgress({
      color: '#4B5563',
    }),
})

Start development

Create a page component

Create the file resources/pages/index.tsx and add the following content:

tsx
export default function Index() {
  return <h1>hello world!</h1>
}
Read more about the Pages Basics.

Create a route

When using Inertia, all of your application's routes are defined server-side. Without the need of creating a Controller, add a route to routes/web.php.

php
use Inertia\Inertia;

Route::get('/', function () {
  return Inertia('index');
});

Start the development server

Run the Vite dev server with the dev command and open the application in your browser.

shell
npm run dev
shell
pnpm run dev
shell
yarn run dev
shell
bun run dev
shell
# outputs
VITE v5.2.9  ready in 1487 ms

  Local:   http://localhost:5173/
  Network: use --host to expose
  press h to show help

What's next?

Your contributions are welcome! Please read our contributing guide for more information.