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

Tutorial step‑by‑step ini menjelaskan cara menginstal Laravel 11 terbaru, mengkonfigurasi Vite untuk asset bundling, menambahkan Breeze untuk scaffolding autentikasi, serta mengamankan API dengan Sanctum. Ikuti semua langkah dengan contoh kode dan best practice terkini.

1. Prerequisite dan Persiapan Lingkungan

1.1. Sistem Operasi & Software

• PHP >= 8.2
• Composer 2.x
• Node.js >= 20 (LTS)
• Git

1.2. Buat Direktori Project

mkdir laravel-modern && cd laravel-modern

2. Instalasi Laravel 11

2.1. Menggunakan Composer Create‑Project

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

Perintah ini mengunduh versi stabil Laravel 11.

2.2. Verifikasi Instalasi

php artisan --version

Output: Laravel Framework 11.x.x

3. Konfigurasi Vite (Asset Bundler)

3.1. Install Node Dependencies

npm install

3.2. Pastikan vite.config.js berisi:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

3.3. Jalankan Dev Server

npm run dev

Vite akan hot‑reload semua perubahan pada resources.

4. Setup Autentikasi dengan Laravel Breeze

4.1. Instalasi Breeze via Composer

composer require laravel/breeze --dev

4.2. Generate Scaffold

php artisan breeze:install vue

Pilih vue untuk front‑end modern; tersedia juga react atau blade.

4.3. Install Front‑end Dependencies

npm install && npm run dev

4.4. Migrasi Database

php artisan migrate

Database default di .env dapat disesuaikan.

5. Mengamankan API dengan Laravel Sanctum

5.1. Instalasi Sanctum

composer require laravel/sanctum

5.2. Publish Config & Migrations

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

5.3. Tambahkan Middleware ke api Guard

// app/Http/Kernel.php
'api' => [
    \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
    'throttle:api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],

5.4. Buat Route API yang Dilindungi

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

5.5. Contoh Penggunaan di Front‑end (Vue)

import axios from 'axios';

await axios.get('/sanctum/csrf-cookie'); // set XSRF token
const { data } = await axios.post('/login', {email, password});
// token akan disimpan secara otomatis dalam cookie
const user = await axios.get('/api/user');
console.log(user.data);

6. Best Practice Modern

• Environment Variables: Simpan rahasia di .env dan jangan commit.
• Database Transactions: Gunakan DB::transaction pada operasi kompleks.
• Code Style: Ikuti PSR‑12 dan gunakan Laravel Pint untuk otomatis linting.
• Testing: Tulis Feature Test dengan php artisan test untuk endpoint Sanctum.
• Deploy: Pada produksi, jalankan npm run build dan php artisan config:cache, php artisan route:cache.

Dengan mengikuti langkah‑langkah di atas, Anda kini memiliki proyek Laravel 11 yang terstruktur secara modern: Vite untuk asset bundling cepat, Breeze untuk autentikasi UI siap pakai, serta Sanctum untuk API yang aman. Terapkan best practice seperti environment management, testing, dan caching untuk memastikan aplikasi Anda skalabel dan siap produksi.

---

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

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend