---
title: "Realizzare un progetto Laravel + Filament + ReactJS + Tailwindcss"
id: "90"
type: "post"
slug: "realizzare-un-progetto-laravel-filament-reactjs-tailwindcss"
published_at: "2026-04-11T13:01:43+00:00"
modified_at: "2026-05-25T08:46:49+00:00"
url: "https://pierluigipapeschi.com/realizzare-un-progetto-laravel-filament-reactjs-tailwindcss/"
markdown_url: "https://pierluigipapeschi.com/realizzare-un-progetto-laravel-filament-reactjs-tailwindcss.md"
excerpt: "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..."
taxonomy_category:
  - "FilamentPHP"
  - "Laravel"
  - "React"
  - "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: [],
}
```

Lanciamo `npm run build`per compilare tutti i file di stile e javascript.

Se dovesse sorgere un errore che non viene trovato il file **bootstrap.js**, creiamolo:

```
//File: resources/js/bootstrap.js 

import axios from 'axios';

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

Adesso rilanciamo **npm run build** e accediamo all’url: tuosito.ltd/admin, dove **“/admin”** è il panel Filament che abbiamo deciso sopra, quindi se ne hai creato uno con un nome diverso devi mettere quello.

Buon divertimento!