Panduan Lengkap Setup Laravel 11 dengan Vite, Breeze, dan Sanctum (2026)

Tutorial step‑by‑step ini menjelaskan cara menginstal Laravel 11 terbaru, mengonfigurasi Vite untuk asset bundling, menambahkan Breeze sebagai starter kit, serta mengamankan API dengan Sanctum.

1. Persyaratan Sistem

• PHP >= 8.3
• Composer 2.7+
• Node.js 20.x atau lebih baru
• Database MySQL 8.0 atau PostgreSQL 15

2. Instalasi Laravel 11

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

Perintah di atas mengunduh Laravel 11 stabil beserta dependensi default.

3. Setup Vite (Asset Bundler)

Laravel 11 sudah menyertakan preset Vite, cukup install npm dependencies:

npm install
npm run dev

File vite.config.js sudah dikonfigurasi untuk resources/js/app.js dan resources/css/app.css. Untuk production, jalankan npm run build.

3.1. Menambahkan TailwindCSS (opsional)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Ubah tailwind.config.js:

module.exports = {
  content: ['./resources/**/*.blade.php', './resources/**/*.js', './resources/**/*.vue'],
  theme: { extend: {} },
  plugins: [],
}

Kemudian import di resources/css/app.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Instalasi Laravel Breeze

Breeze menyediakan antarmuka auth sederhana berbasis Blade atau Inertia. Kita gunakan Blade karena kompatibel dengan Vite.

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

Setelah ini, Anda memiliki route /login, /register, dan layout dasar.

5. Menambahkan Laravel Sanctum

Sanctum memungkinkan token‑based API dan SPA authentication.

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

5.1. Konfigurasi Middleware

Tambahkan EnsureFrontendRequestsAreStateful::class ke middleware grup api di app/Http/Kernel.php:

'api' => [
    \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
    'throttle:api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],

5.2. Menggunakan SPA Guard

Di config/auth.php ubah guard web menjadi:

'guards' => [
    'web' => [
        'driver' => 'sanctum',
        'provider' => 'users',
    ],
],

5.3. Membuat API Route Contoh

// routes/api.php
use Illuminate\Support\Facades\Route;

Route::middleware('auth:sanctum')->get('/user/profile', function (Request $request) {
    return $request->user();
});

6. Testing End‑to‑End

1. Jalankan server: php artisan serve
2. Buka http://localhost:8000/register dan buat akun.
3. Setelah login, gunakan Postman atau Insomnia untuk memanggil GET /api/user/profile dengan cookie session (karena SPA guard).
4. Jika mendapat data JSON user, konfigurasi berhasil.

7. Best Practices untuk Produksi

• Aktifkan APP_DEBUG=false dan gunakan APP_KEY yang unik.
• Cache konfigurasi & route: php artisan config:cache && php artisan route:cache.
• Gunakan php artisan storage:link untuk mengakses file publik.
• Set up queue worker (Redis) untuk email verification bila dibutuhkan.
• Gunakan HTTPS dan set SESSION_SECURE_COOKIE=true serta SANCTUM_STATEFUL_DOMAINS yang tepat.

Dengan mengikuti langkah‑langkah di atas, Anda memiliki proyek Laravel 11 modern yang menggabungkan Vite untuk front‑end, Breeze sebagai starter kit UI, dan Sanctum untuk keamanan API. Setup ini siap untuk dikembangkan menjadi aplikasi SPA atau monolith tradisional, sekaligus memanfaatkan best practice Laravel 2026.

---

Tutorial lengkap setup Laravel 11 dengan Vite, Breeze, dan Sanctum di tahun 2026. Langkah instalasi, konfigurasi, contoh kode, dan best practice untuk produksi.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend