Realizzare un progetto Laravel + Filament + ReactJS + Tailwindcss

Per prima cosa creo il progetto Laravel vaniglia:

# composer create-project laravel/laravel myapp

# mv myapp/* .

# mv myapp/.env .

# rm-Rf myapp

Laravel 12 fornisce un installer dedicato per Inertia con ReactJS:

# composer require laravel/breeze –dev

# php artisan breeze:install react

Questo va a fare le seguenti cose:

• Configura Inertia.js + React

• Aggiunge Vite già impostato

• Configura TailwindCSS

• Crea una struttura frontend in resources/js/Pages/

Infine installiamo questi componenti con:

# npm install

Poi passiamo a FilamentPHP:

# composer require filament/filament -W

# php artisan filament:install

# php artisan filament:install –panels

Poi creiamo il primo utente amministratore (se non lo avete ancora fatto lanciate php artisan migrate per creare le tabelle nel database):

# php artisan make:filament-user

Passiamo a Inertia,.js React e Vite

# composer require inertiajs/inertia-laravel

# npm install @inertiajs/react

Pubblichiamo il middleware di Inertia con

# php artisan inertia:middleware

In Laravel 12 il middleware non aggiunge più nel Kernel.php, bensì in bootstrap/app.php:

…
\App\Http\Middleware\HandleInertiaRequests::class,
…

Poi TailwindCSS, da notare che dobbiamo procedere con una versione precedente all’ultima (adesso sarebbe la 4) perché non è ancora stabile e non consente l’installazione a causa di un errore:

# npm install -D tailwindcss@3 postcss autoprefixer

# npx tailwindcss init -p

Configuriamo tailwind modificando il file tailwind.coinfig.js