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 né scaricati né installati) 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"

FilamentPHP

Passiamo a FilamentPHP:

composer require filament/filament -W
php artisan filament:install
php artisan filament:install --panels

Creazione del primo utente

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

Diamo un’email e una password per accedere al beckend come amministratore.

La magia: Inertia + ReactJS

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 si aggiunge più nel Kernel.php, bensì in bootstrap/app.php:

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

TailwindCSS

Infine arrivò 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.config.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';