Getting Started
InertiaJS Configuration

InertiaJS configuration

Craftable PRO is using InertiaJS which allow to use .vue files for the frontend part of your application instead of Blade templates. You can learn more in InertiaJS's documentation (opens in a new tab)

Root template

Craftable PRO is using resources/views/craftable-pro.blade.php as a root template for InertiaJS to render the frontend part of your application.

Middleware

To share data between the backend and the frontend part of your application, we use the share function in Brackets\CraftablePro\Http\Middleware\CraftableProHandleInertiaRequests middleware. This middleware is already applied to all Craftable PRO routes by default.

If you need to edit shared data inside the middleware, you can do it by publishing the middleware with following command:

php artisan vendor:publish --tag=craftable-pro-handle-inertia-requests

Afterwards you have to change handle-inertia-request-class in config/craftable.php to App\Http\Middleware\CraftableProHandleInertiaRequests:

config/craftable-pro.php
<?php
 
return [
    ...
    'handle-inertia-request-class' => App\Http\Middleware\CraftableProHandleInertiaRequests::class,
    ...
];

Using InertiaJS outside Craftable PRO

Laravel 11+

If you would like to use an InertiaJS in the frontend part of your application we recommend you to separate the Craftable PRO routes with it's own InertiaJS middleware.

Extract routes

Move all craftable-pro routes from routes/web.php into a separate file routes/craftable-pro.php

routes/craftable-pro.php
<?php
 
use Illuminate\Support\Facades\Route;
 
Route::craftablePro('admin');

Update bootstrap/app.php

Create a new route middleware group, with the same middlewares as you have in the web group:

bootstrap/app.php
<?php
use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
use Illuminate\Support\Facades\Route;
 
return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__.'/../routes/web.php',
        then: function () {
            Route::middleware('craftable-pro')
                ->group(base_path('routes/craftable-pro.php'));
        },
        commands: __DIR__.'/../routes/console.php',
        health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware) {
        $middleware->appendToGroup('craftable-pro', [
            \Illuminate\Cookie\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \Illuminate\Foundation\Http\Middleware\ValidateCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ]);
    })
    ->withExceptions(function (Exceptions $exceptions) {
        ...

Older Laravel versions

If you would like to use an InertiaJS in the frontend part of your application we recommend you to separate the Craftable PRO routes with it's own InertiaJS middleware.

Extract routes

Move all craftable-pro routes from routes/web.php into a separate file routes/craftable-pro.php

routes/craftable-pro.php
<?php
 
use Illuminate\Support\Facades\Route;
 
Route::craftablePro('admin');

Update app/Http/Kernel.php

Create a new route middleware group, with the same middlewares as you have in the web group:

Kernel.php
class Kernel extends HttpKernel
{
    ...
 
    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
 
        'craftable-pro' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
 
        'api' => [
            'throttle:api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
    ];
}

Update RouteServiceProvider.php

Register this new middleware group in your RouteServiceProvider. Place it before the web group to prevent any wildcard routes from matching before the Craftable PRO routes.

RouteServiceProvider.php
class RouteServiceProvider extends ServiceProvider
{
    ...
 
    public function boot()
    {
        $this->configureRateLimiting();
 
        $this->routes(function () {
            Route::middleware('api')
                ->prefix('api')
                ->group(base_path('routes/api.php'));
 
            Route::middleware('craftable-pro')
                ->group(base_path('routes/craftable-pro.php'));
 
            Route::middleware('web')
                ->group(base_path('routes/web.php'));
        });
    }
}
Last updated on May 9, 2024
ConfigurationVite Configuration