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
- In the project root, rename
vite.config.js
tovite.config.ts
. - In the project root, create a
tsconfig.json
file. - Delete the
resources/js
directory. - Create the
resources/application
directory. - Create the
resources/pages
directory.
Installation
Install the Inertia.js-Revamped Preact framework adapter:
npm install --save-dev @inertiajs-revamped/preact
pnpm add -D @inertiajs-revamped/preact
yarn add -D @inertiajs-revamped/preact
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).
{
"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.
{
"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.
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).
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.
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.
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:
export default function Index() {
return <h1>hello world!</h1>
}
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
.
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.
npm run dev
pnpm run dev
yarn run dev
bun run dev
# 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?
- To learn about our project structure convention, read the basics.