Client-side Setup
This guide assumes you've already read the Project Structure Basics.
This document will guide you through the setup of the React 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 React framework adapter:
npm install --save-dev @inertiajs-revamped/react
pnpm add -D @inertiajs-revamped/react
yarn add -D @inertiajs-revamped/react
bun add -D @inertiajs-revamped/react
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/react": "^0.0.6",
"@types/node": "^20.14.1",
"@types/react": "^18.3.2",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.2.1",
"axios": "^1.7.2",
"laravel-vite-plugin": "^1.0.4",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"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",
"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 react from '@vitejs/plugin-react'
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,
}),
react(),
]
})
Initialize the main entry
Create resources/application/main.tsx
and initialize the main entry-point (no SSR).
import { createInertiaApp, resolvePageComponent } from '@inertiajs-revamped/react'
import { createProgress } from '@inertiajs-revamped/react/progress'
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
createInertiaApp({
title: (title) => `${title} - Starter kit`,
resolve: (name) =>
resolvePageComponent(
`../pages/${name}.tsx`,
import.meta.glob('../pages/**/*.tsx')
),
setup({ el, App, props }) {
createRoot(
el!,
<StrictMode>
<App {...props} />
</StrictMode>
)
},
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/react'
import { createServer } from '@inertiajs-revamped/react/server'
import { renderToString } from 'react-dom/server'
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 React app, update your main.tsx
file.
import { createInertiaApp, resolvePageComponent } from '@inertiajs-revamped/react'
import { createProgress } from '@inertiajs-revamped/react/progress'
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { hydrateRoot } from 'react-dom/client'
createInertiaApp({
title: (title) => `${title} - Starter kit`,
resolve: (name) =>
resolvePageComponent(
`../pages/${name}.tsx`,
import.meta.glob('../pages/**/*.tsx')
),
setup({ el, App, props }) {
createRoot(
el!,
<StrictMode>
<App {...props} />
</StrictMode>
)
hydrateRoot(
el!,
<StrictMode>
<App {...props} />
</StrictMode>
)
},
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.