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

Panduan lengkap step-by-step untuk menginstal Laravel 11 terbaru, mengintegrasikan Vite, Breeze, dan Sanctum, serta menerapkan best practice keamanan dan pengembangan front‑end modern.

1. Persyaratan Sistem

• PHP >= 8.2
• Composer 2.x
• Node.js >= 20 dengan npm atau Yarn
• Database (MySQL, PostgreSQL, SQLite, dsb.)

2. Instalasi Laravel 11

composer create-project laravel/laravel:^11.0 my-project
cd my-project

Perintah di atas membuat proyek baru dengan Laravel 11 dan masuk ke direktori proyek.

3. Mengatur Vite (Asset Bundler bawaan)

Laravel 11 sudah terkonfigurasi dengan Vite secara default. Pastikan file vite.config.js ada.

npm install
npm run dev

Jalankan npm run dev untuk memulai server Vite. Pada resources/js/app.js dan resources/css/app.css Anda dapat menulis kode Vue, React, atau plain JavaScript.

4. Instalasi Laravel Breeze (Starter Kit)

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

Perintah di atas menambahkan autentikasi sederhana berbasis Vue, route, controller, dan view Blade. Pilihan vue dapat diganti dengan react atau blade sesuai kebutuhan.

5. Menyiapkan Laravel Sanctum (API Token & SPA Auth)

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

Sanctum menyediakan dua mode: token‑based API dan cookie‑based SPA authentication. Kita akan mengaktifkan cookie‑based untuk SPA Vue yang sudah di‑install oleh Breeze.

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 Set CORS

Edit config/cors.php agar domain front‑end (misalnya http://localhost:5173) di‑allow:

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

5.3 Front‑end: CSRF & Auth

Di resources/js/app.js tambahkan:

import { createApp } from 'vue'
import { router } from './router'
import axios from 'axios'

axios.defaults.withCredentials = true
axios.defaults.baseURL = import.meta.env.VITE_APP_URL || 'http://localhost:8000'

createApp({})
    .use(router)
    .mount('#app')

6. Best Practice

• Environment Variables: Gunakan .env.example untuk mendefinisikan APP_URL, VITE_APP_URL, dan kredensial database.
• Git Hook: Tambahkan pre‑commit hook untuk menjalankan php artisan format atau npm run lint agar kode tetap konsisten.
• Docker: Buat docker-compose.yml dengan layanan php, mysql, node, dan nginx untuk environment production‑like.
• Testing: Gunakan php artisan test untuk Unit & Feature tests, serta cypress atau playwright untuk E2E pada front‑end Vue.
• Cache & Config Optimisation: Jalankan php artisan config:cache dan php artisan route:cache sebelum deploy.

7. Deploy ke Production

1. Build assets: npm run build
2. Upload seluruh kode ke server (Git, FTP, atau CI/CD).
3. Jalankan migrasi: php artisan migrate --force
4. Cache konfigurasi & route.
5. Set permission storage dan bootstrap/cache agar dapat ditulis web server.

Setelah semua langkah selesai, aplikasi Laravel 11 Anda siap melayani request SPA dengan autentikasi Sanctum dan front‑end modern yang di‑bundle oleh Vite.

Dengan mengikuti langkah‑langkah di atas, Anda memperoleh sebuah proyek Laravel 11 yang modern, aman, dan siap untuk pengembangan berkelanjutan. Integrasi Vite, Breeze, dan Sanctum memberikan workflow front‑end yang cepat, autentikasi SPA yang handal, serta fondasi kode yang mudah dipelihara melalui best practice terbaru.

---

Panduan lengkap setup Laravel 11 dengan Vite, Breeze, dan Sanctum. Langkah instalasi, konfigurasi, contoh kode, serta best practice modern untuk pengembangan web PHP Framework terkini.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend