Setup Laravel 11 dengan Best Practice Modern: Vite, Breeze & Sanctum

Panduan lengkap langkah demi langkah untuk menginstal Laravel 11 terbaru, mengintegrasikan Vite, Breeze, dan Sanctum, serta menerapkan best practice keamanan dan pengembangan modern.

1. Prasyarat

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

2. Instalasi Laravel 11

composer create-project laravel/laravel laravel-app "11.*"

Masuk ke folder proyek:

cd laravel-app

2.1. Konfigurasi .env

Sesuaikan koneksi database dan APP_KEY:

cp .env.example .env
php artisan key:generate
# edit .env sesuai database Anda

3. Integrasi Vite (frontend build)

Laravel 11 sudah menyertakan Vite secara default, namun pastikan dependensi terinstall:

npm install

Jalankan server dev:

npm run dev

Untuk produksi, build aset dengan:

npm run build

Best Practice Vite

• Gunakan vite.config.ts untuk alias path (contoh: @/components).
• Aktifkan esbuild untuk minify CSS/JS.
• Hindari menaruh file JS besar di resources/js; gunakan modularisasi.

4. Instalasi Laravel Breeze (starter kit UI)

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

Jika ingin menggunakan Blade + Tailwind, gunakan blade sebagai argumen.

Instalasi dependensi frontend:

npm install && npm run dev

4.1. Menjalankan migrasi

php artisan migrate

Anda sudah memiliki sistem autentikasi dasar (login, register, reset password).

5. Menambahkan Laravel Sanctum (API token & SPA authentication)

composer require laravel/sanctum

Publikasikan konfigurasi & migrasi:

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

5.1. Konfigurasi Middleware

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

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

5.2. Penggunaan di Frontend (Vue 3 contoh)

import axios from 'axios'
axios.get('/sanctum/csrf-cookie').then(() => {
  axios.post('/login', {email, password})
})

Setelah login, Sanctum akan mengatur cookie XSRF-TOKEN otomatis.

6. Best Practice Keamanan & Struktur Proyek

• Environment: Jangan pernah commit .env. Gunakan .env.example yang bersih.
• Validation: Manfaatkan Form Request (php artisan make:request) untuk validasi terpusat.
• Route Model Binding: Selalu gunakan implicit binding untuk menghindari manual query.
• Caching Config & Routes: Pada produksi jalankan php artisan config:cache dan php artisan route:cache.
• Queue & Jobs: Untuk proses berat (email, export) gunakan queue dengan driver redis atau database.
• Testing: Tuliskan unit & feature test menggunakan Pest atau PHPUnit; jalankan php artisan test sebelum deploy.

7. Deploy ke Production

1. Set environment variable APP_ENV=production dan APP_DEBUG=false.
2. Jalankan composer install --optimize-autoloader --no-dev.
3. Build assets: npm ci && npm run build.
4. Cache konfigurasi & routes.
5. Set permission folder storage dan bootstrap/cache agar writable.
6. Gunakan php artisan schedule:run via cron untuk scheduler.

8. Verifikasi Instalasi

Buka browser, akses http://your-domain.test. Anda harus melihat halaman landing Breeze, login, dan fitur API yang dilindungi Sanctum.

Dengan mengikuti langkah‑langkah di atas, Anda akan memiliki aplikasi Laravel 11 yang modern, aman, dan siap dikembangkan lebih lanjut. Vite memberikan performa frontend terkini, Breeze menyediakan UI cepat dengan Tailwind atau Vue, dan Sanctum melindungi API serta SPA authentication. Terapkan best practice keamanan, testing, dan caching untuk memastikan aplikasi tetap stabil di lingkungan production.

---

Tutorial step-by-step setup Laravel 11 terbaru dengan Vite, Breeze, dan Sanctum. Panduan lengkap instalasi, konfigurasi, contoh kode, serta best practice modern untuk pengembangan web dengan Laravel, PHP Framework, dan Web Development.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend