Panduan Lengkap Setup Laravel 11 dengan Best Practice Modern (Vite, Breeze, Sanctum, dan Livewire)

Pelajari cara menginstal Laravel versi terbaru pada tahun 2026 dan mengkonfigurasi ekosistem modernnya—Vite, Breeze, Sanctum, serta Livewire—dengan langkah demi langkah yang akurat dan up to date.

1. Persiapan Lingkungan

1.1. Persyaratan Server

• PHP >= 8.2
• Composer 2.7+
• Node.js >= 20 (untuk Vite)
• Database MySQL 8 atau PostgreSQL 15

1.2. Instalasi Composer dan Node

curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
npm install -g npm@latest

2. Membuat Project Laravel 11

composer create-project laravel/laravel blog "11.*" --prefer-dist
cd blog

2.1. Mengaktifkan Laravel Vite

Laravel 11 sudah menyertakan Vite secara default. Pastikan file vite.config.js ada dan package.json berisi:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

2.2. Install dependencies front‑end

npm install
npm run dev

3. Menambahkan Breeze untuk Authentication UI

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

Jika ingin menggunakan Inertia + Vue atau React, gunakan php artisan breeze:install vue atau react.

4. Mengkonfigurasi Laravel Sanctum (API Token & SPA Authentication)

4.1. Instalasi Sanctum

composer require laravel/sanctum

4.2. Publish konfigurasi & migrasi

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate

4.3. Middleware pada kernel.php

\App\Http\Kernel::class => [
    // ...
    \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
];

4.4. Penggunaan di SPA (Vue/React)

Pastikan request AJAX mengirimkan cookie XSRF-TOKEN. Contoh dengan Axios:

axios.defaults.withCredentials = true;
axios.get('/api/user').then(response => console.log(response.data));

5. Menambahkan Livewire 3 (Realtime UI)

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

Pasang komponen contoh:

php artisan make:livewire Counter

File resources/views/livewire/counter.blade.php:

<div>
    <button wire:click="increment">+</button>
    <span>{{ $count }}</span>
</div>

5.1. Registrasi di Blade

@livewire('counter')

6. Best Practice Modern

• Environment variables: gunakan .env.example lengkap, hindari menaruh kredensial di repo.
• Cache konfigurasi: after deployment run php artisan config:cache and php artisan route:cache.
• Database migrations: selalu php artisan migrate --force pada produksi.
• Testing: gunakan PestPHP atau PHPUnit; contoh php artisan test.
• Docker: rekomendasikan laravel/sail untuk local dev dengan sail up -d.
• Code style: jalankan composer lint dengan PHP-CS-Fixer.

7. Deploy ke Production

# Pull repo
git pull origin main
composer install --optimize-autoloader --no-dev
npm ci && npm run build
php artisan migrate --force
php artisan config:cache
php artisan route:cache
php artisan view:cache
systemctl reload php-fpm

Dengan mengikuti langkah‑langkah di atas, Anda mendapatkan aplikasi Laravel 11 yang modern, cepat, dan siap production. Kombinasi Vite, Breeze, Sanctum, dan Livewire memberi fondasi UI yang responsif, otentikasi aman, serta pengalaman developer yang optimal. Selalu perbarui dependensi secara berkala dan ikuti best practice untuk menjaga keamanan dan performa aplikasi.

---

Tutorial lengkap setup Laravel 11 di 2026 dengan Vite, Breeze, Sanctum, dan Livewire. Langkah demi langkah, konfigurasi, contoh kode, dan best practice modern.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend