# NPM
npm i @adonisjs/inertia
# Yarn
yarn add @adonisjs/inertia
# Pnpm
pnpm add @adonisjs/inertia
# ace command from adonis
node ace configure @adonisjs/inertia
And follow the instruction. (notice : accept to install the inertia and react packages recommanded)
import { defineConfig } from 'vite'
import adonisjs from '@adonisjs/vite/client'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [
adonisjs({
/**
* Entrypoints of your application. Each entrypoint will
* result in a separate bundle.
*/
entrypoints: ['resources/js/app.js'],
/**
* Paths to watch and reload the browser on file change
*/
reload: ['resources/views/**/*.edge'],
}),
react(),
],
})
/resources/view/home.edge
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> AdonisJS - A fully featured web framework for Node.js </title>
@viteReactRefresh()
@vite(['resources/js/app.tsx'])
@inertiaHead
</head>
<body>
#Inertia setup
@inertia()
</body>
</html>
The line @vite(['resources/js/app.tsx'])
will be this entrypoint file.
resources/js/app.tsx
import { createInertiaApp } from '@inertiajs/react'
import React from 'react'
import { createRoot } from 'react-dom/client'
createInertiaApp({
resolve: (name) => {
#Pages registration './Pages/${name}.tsx' that can be what you want
const pages = import.meta.glob('./Pages/**/*.tsx', { eager: true })
return pages[`./Pages/${name}.tsx`]
},
setup({ el, App, props }) {
createRoot(el).render(<App {...props} />)
},
})
/start/routes.ts
import { HttpContext } from '@adonisjs/core/http'
import router from '@adonisjs/core/services/router'
router.get('/', ({ inertia }: HttpContext) => {
const title = 'Hello world with Inertia'
return inertia.render('home', { title })
})
/resources/js/Pages/home.tsx
import React from 'react'
interface HomeProps {title: string}
const home: React.FunctionComponent<HomeProps> = ({ title }) => {
return <div>hello ! {title}</div>
}
export default home
For more information on adonis/inertia app gon on aidellev/inertiajs-adonisjs