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

Tutorial step‑by‑step untuk menginstal Laravel 11 terbaru, mengkonfigurasi Vite, Breeze, dan Sanctum, serta menerapkan best practice keamanan dan performa.

1. Prasyarat

• PHP >= 8.2
• Composer 2.x
• Node.js >= 20 & npm
• Database MySQL/PostgreSQL

2. Instalasi Laravel 11

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

Perintah di atas menghasilkan proyek Laravel 11 dengan struktur terbaru.

3. Setup Vite (Asset Bundler)

Laravel 11 sudah menyertakan Vite secara default. Pastikan file vite.config.js ada dan set properti server.host untuk hot‑reload.

// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    server: { host: '127.0.0.1', hot: true },
    plugins: [laravel([ 'resources/css/app.css', 'resources/js/app.js' ])],
});

Jalankan:

npm install
npm run dev

4. Instalasi Laravel Breeze (Starter Kit)

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

Breeze menyediakan autentikasi dasar, layout Blade, dan komponen Vue 3 yang ter‑integrasi dengan Vite.

5. Menambahkan Laravel Sanctum (API Token & SPA Authentication)

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

Aktifkan middleware EnsureFrontendRequestsAreStateful::class pada app/Http/Kernel.php:

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

5.1. Konfigurasi CSRF untuk SPA

Di resources/js/app.js tambahkan token CSRF secara otomatis:

import { createApp } from 'vue';
import axios from 'axios';
axios.defaults.withCredentials = true;
axios.get('/sanctum/csrf-cookie');

6. Pengaturan Database & .env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog
DB_USERNAME=root
DB_PASSWORD=secret

Jalankan migrasi:

php artisan migrate

7. Contoh Kode – Registrasi & Login SPA

Component Vue Register.vue:

<template>
  <form @submit.prevent="register">
    <input v-model="form.name" placeholder="Nama" required/>
    <input v-model="form.email" type="email" placeholder="Email" required/>
    <input v-model="form.password" type="password" placeholder="Password" required/>
    <button type="submit">Daftar</button>
  </form>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const form = ref({ name: '', email: '', password: '' });

const register = async () => {
  await axios.get('/sanctum/csrf-cookie'); // get CSRF token
  await axios.post('/register', form.value);
  // redirect atau set state login
};
</script>

Route API di routes/api.php sudah disediakan oleh Breeze; Anda hanya perlu melindungi route dengan auth:sanctum bila diperlukan.

8. Best Practice

• Environment Separation: gunakan .env.testing untuk CI, jangan commit secret.
• Cache Config & Routes pada production: php artisan config:cache && php artisan route:cache
• Gunakan Queue untuk email/verifikasi: php artisan queue:work
• Static Asset Versioning otomatis lewat Vite (manifest.json).
• Security: aktifkan APP_DEBUG=false, set SESSION_SECURE_COOKIE=true, gunakan HTTPS.

9. Deploy ke Production (Contoh dengan Laravel Forge)

1. Push repository ke GitHub.
2. Buat site baru di Forge, pilih PHP 8.2, database MySQL.
3. Deploy script:

cd /home/forge/{{domain}}
git pull origin main
composer install --optimize-autoloader --no-dev
npm ci
npm run build
php artisan migrate --force
php artisan cache:clear
php artisan config:cache
php artisan route:cache
php artisan view:cache

Pastikan QUEUE_CONNECTION=redis dan Supervisor mengelola worker.

10. Verifikasi

Buka https://your-domain.test, registrasi, login, dan periksa header sanctum-cookie. Semua fungsi SPA harus berjalan tanpa reload penuh.

Dengan mengikuti langkah‑langkah di atas, Anda memiliki aplikasi Laravel 11 modern yang memakai Vite untuk asset bundling, Breeze sebagai starter kit UI, dan Sanctum untuk autentikasi SPA yang aman. Implementasi best practice membuat aplikasi siap produksi, scalable, dan mudah dipelihara dalam ekosistem PHP Framework Laravel.

---

Tutorial lengkap setup Laravel 11 dengan Vite, Breeze, dan Sanctum. Ikuti langkah instalasi, konfigurasi, contoh kode, dan best practice untuk proyek PHP Framework modern.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend