Setup Laravel 11 Terbaru dengan Best Practice Modern: Vite, Breeze, Sanctum, dan Livewire

Panduan lengkap langkah demi langkah untuk menginstal Laravel 11, mengkonfigurasi Vite, Breeze, Sanctum, serta menambahkan Livewire, memastikan aplikasi siap produksi dengan praktik terbaik terkini di tahun 2026.

1. Persyaratan Sistem

• PHP >= 8.2
• Composer 2.x
• Node.js >= 20 & npm
• Database (MySQL 8+, PostgreSQL 15+, atau SQLite)

2. Instalasi Laravel 11

composer create-project laravel/laravel example-app "11.*" --quiet
cd example-app

Perintah di atas mengunduh kerangka kerja Laravel 11 terbaru.

3. Mengganti Mix dengan Vite (Default)

Laravel 11 sudah menyertakan Vite. Pastikan file vite.config.js ada dan sesuaikan jika diperlukan.

npm install
npm run dev

Gunakan npm run build untuk produksi.

4. Menambahkan Laravel Breeze (Auth & UI)

composer require laravel/breeze --dev
php artisan breeze:install vue
npm install && npm run dev

Breeze memberi scaffolding autentikasi lengkap dengan Vue 3 & Vite.

4.1. Migrasi Database

php artisan migrate

5. Mengamankan API dengan Laravel Sanctum

composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate

Tambahkan middleware EnsureFrontendRequestsAreStateful::class pada api di Kernel.php untuk SPA.

5.1. Konfigurasi CORS

// config/cors.php
'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_methods' => ['*'],
'allowed_origins' => ['http://localhost:5173'],
'allowed_headers' => ['*'],
'supports_credentials' => true,

6. Menambahkan Livewire 3 (Realtime UI)

composer require livewire/livewire
php artisan livewire:publish --assets

Livewire kini terintegrasi dengan Vite secara otomatis.

6.1. Contoh Komponen Livewire

php artisan make:livewire Counter

File app/Http/Livewire/Counter.php:

namespace App\Http\Livewire;
use Livewire\Component;
class Counter extends Component {
    public $count = 0;
    public function increment() { $this->count++; }
    public function render() { return view('livewire.counter'); }
}

Blade view resources/views/livewire/counter.blade.php:

<div>
    <h1>Count: {{ $count }}</h1>
    <button wire:click="increment">Tambah</button>
</div>

7. Struktur Direktori & Best Practice

• Routes: pisahkan API (routes/api.php) dan web (routes/web.php).
• Controllers: gunakan php artisan make:controller --api untuk API.
• Form Request Validation: buat php artisan make:request StorePostRequest daripada validasi di controller.
• Service Layer: letakkan logika bisnis di app/Services untuk menjaga controller ringan.
• DTO & Resources: gunakan Data Transfer Objects dan API Resources untuk response konsisten.
• Testing: jalankan php artisan test dan gunakan Pest atau PHPUnit.

8. Deploy ke Production

1. Set environment di .env.production (APP_ENV=production, APP_DEBUG=false).
2. Jalankan composer install --optimize-autoloader --no-dev.
3. Compile aset: npm run build.
4. Migrasi & seed: php artisan migrate --force.
5. Cache konfigurasi & routes: php artisan config:cache && php artisan route:cache.
6. Gunakan server PHP-FPM + Nginx, atau Laravel Octane (Swoole) untuk performa tinggi.

Dengan langkah‑langkah di atas, proyek Laravel Anda siap untuk dijalankan secara modern, aman, dan scalable di tahun 2026.

Menggabungkan Vite, Breeze, Sanctum, dan Livewire dalam Laravel 11 memberikan fondasi yang kuat untuk aplikasi web modern. Dengan mengikuti best practice configurasi, struktur kode, serta workflow deployment, developer dapat membangun solusi yang cepat, aman, dan mudah dipelihara pada ekosistem Laravel terkini.

---

Tutorial step-by-step setup Laravel 11 dengan Vite, Breeze, Sanctum, dan Livewire. Panduan lengkap 2026 untuk best practice modern Laravel development.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend