Realizzare un progetto Laravel + Filament + ReactJS + Tailwindcss

Oggi vediamo come creare un backend professionale e potente basato su Laravel, ma che adotta FilamentPHP per la struttura del backend e ReactJS per la costruzione delle pagine.

Per prima cosa si crea il progetto Laravel vaniglia:

# su - nome_utente 
# composer create-project laravel/laravel myapp
# mv myapp/* .
# mv myapp/.env .
# rm-Rf myapp

Configurare il file con le credenziali per i servizi tra cui il database modificando il file .env, e costruire la struttura delle tabelle con:

# php artisan migrate

Poiché Laravel è un framework PHP, mentre noi andremo a usare pagine Javascript (ReactJS appunto), questo ha bisogno di un “ponte” tra le rotte PHP di Laravel e le pagine JSX di React. Questo ponte si chiama Inertia ed è un plugin per Laravel che fa proprio questo.

# 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 tutti questi componenti (che finora erano solo configurati ma non scaricati) con # npm install

Se dovesse sorgere un conflitto di dipendenze tra vite e react, poiché ad oggi vite 8 va in conflitto con le richieste di Laravel, modifichiamo il file package.json 

così:

"vite": "^7.0.0",
"laravel-vite-plugin": "^2.0.0",
"@vitejs/plugin-react": "^4.0.0"

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 (se esiste già vedrete un errore, ma va bene così)

# 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

/** @type {import('tailwindcss').Config} */
export default {
  content: [
  "./resources/**/*.blade.php",
  "./resources/**/*.js",
  "./resources/**/*.jsx",
  "./resources/**/*.tsx",
  "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

//File: resources/js/bootstrap.js 

import axios from 'axios';

window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';