README

Installation

You can install the package via composer:

composer require trianayulianto/inertia-codeigniter-4

Usage

Server-Side Setup

Root template

Make root view named app.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title inertia>CI4-Inertia</title>

    <!-- ViteJs Helper -->
    <?= vite_react_refresh() ?>
    <?= vite(['resources/js/app.tsx', "resources/js/pages/{$page['component']}.tsx"]) ?>
    <?= \Inertia\Directive::inertiaHead($page) ?>
</head>
<body>
   	<?= \Inertia\Directive::inertia($page) ?>
</body>
</html>

Filter

Make new filter

php spark make:filter HandleInertiaRequests

Add code same as below

<?php

namespace App\Filters;

use CodeIgniter\Filters\FilterInterface;
use CodeIgniter\HTTP\Request;
use Inertia\Middleware;

class HandleInertiaRequests extends Middleware implements FilterInterface
{
    /**
     * The root template that is loaded on the first page visit.
     *
     * @var string
     */
    protected $rootView = 'app';

    /**
     * Determine the current asset version.
     *
     * @param  \CodeIgniter\HTTP\Request  $request
     * @return string|null
     */
    public function version(Request $request)
    {
        return parent::version($request);
    }

    /**
     * Define the props that are shared by default.
     *
     * @param  \CodeIgniter\HTTP\Request  $request
     * @return array
     */
    public function share(Request $request)
    {
        return array_merge(parent::share($request), []);
    }
}

Creating responses

That's it, you're all ready to go server-side! From here you can start creating Inertia responses.

use Inertia\Inertia;

class EventsController extends Controller
{
    public function show($id)
    {
        $event = Event::find($id);

        return Inertia::render('Event/Show', [
            'event' => $event,
        ]);
    }
}

Client-Side Setup

Install dependencies

npm install @inertiajs/react

Initialize the Inertia app

In your app.js file, import the adapter and add it to the list of adapters:

import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client'

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
        return pages[`./Pages/${name}.jsx`]
    },
    setup({ el, App, props }) {
        createRoot(el).render(<App {...props} />)
    },
})

Visit inertiajs.com to learn more.

Testing

composer test

Roadmap

Tests

Controller test
Helper test. inertia() helper.
Inertia headers test. An Inertia request should return an Inertia response (JSON response).
Shared data test. It should be accesses in any response.
Lazy props test.

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

Amir Rami - Original author
Triana Yulianto - Current maintainer
All Contributors

License

The MIT License (MIT). Please see License File for more information.

trianayulianto / inertia-codeigniter-4

Maintainers

Details