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

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. Ikuti langkahnya dan terapkan best practice modern untuk proyek Laravel Anda.

1. Prasyarat

Pastikan sistem Anda sudah terinstall:

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

2. Instalasi Laravel 11

2.1 Buat proyek baru

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

Perintah ini mengunduh Laravel versi stabil terbaru (v11) ke folder my-app.

2.2 Masuk ke direktori proyek

cd my-app

3. Konfigurasi Vite (Laravel Mix digantikan)

3.1 Install dependensi frontend

npm install

Package vite dan laravel-vite-plugin sudah terdefinisi di package.json Laravel 11.

3.2 Struktur file Vite

File utama berada di vite.config.js. Contoh konfigurasi minimal:

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 melayani asset secara hot‑reloading pada http://localhost:5173.

4. Menambahkan Laravel Breeze (Starter Kit)

4.1 Install package Breeze

composer require laravel/breeze --dev

4.2 Generate scaffolding

php artisan breeze:install vue

Anda dapat memilih blade, react, atau vue. Di contoh ini menggunakan Vue 3 yang terintegrasi dengan Vite.

4.3 Install dependensi frontend untuk Breeze

npm install && npm run dev

4.4 Migrasi database

php artisan migrate

Ini membuat tabel users, password_resets, dll.

5. Mengamankan API dengan Laravel Sanctum

5.1 Install Sanctum

composer require laravel/sanctum

5.2 Publish konfigurasi & migrasi

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

5.3 Tambahkan middleware ke kernel

Di app/Http/Kernel.php, pastikan EnsureFrontendRequestsAreStateful::class berada di grup api:

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

5.4 Contoh route API dengan token

use App\Models\User;
use Illuminate\Http\Request;

Route::post('/login', function (Request $request) {
    $user = User::where('email', $request->email)->first();
    if (! $user || ! Hash::check($request->password, $user->password)) {
        return response()->json(['message' => 'Invalid credentials'], 401);
    }
    $token = $user->createToken('api-token')->plainTextToken;
    return response()->json(['token' => $token]);
});

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

5.5 Konsumsi API di frontend Vue

import axios from 'axios';

async function login(email, password) {
  const response = await axios.post('/api/login', { email, password });
  localStorage.setItem('token', response.data.token);
}

async function getUser() {
  const token = localStorage.getItem('token');
  const response = await axios.get('/api/user', {
    headers: { Authorization: `Bearer ${token}` },
  });
  return response.data;
}

6. Best Practice Modern

• Environment Files: Simpan semua rahasia (APP_KEY, DB_PASSWORD, SANCTUM_STATEFUL_DOMAINS) di .env dan gunakan php artisan env:cache untuk produksi.
• Cache Config & Routes: php artisan config:cache dan php artisan route:cache meningkatkan performa.
• Queue & Jobs: Untuk operasi berat (email, webhook) gunakan queue dengan driver redis dan php artisan queue:work.
• Testing: Tulis Feature Test dengan Pest atau PHPUnit untuk API yang diproteksi Sanctum.
• Static Analysis: Integrasikan phpstan dan larastan untuk deteksi bug sebelum deploy.

7. Deploy ke Production

1. Set environment ke production di .env.
2. Build assets: npm run build (menghasilkan file di public/build).
3. Run migrations: php artisan migrate --force.
4. Cache config & routes.
5. Gunakan server PHP-FPM + Nginx, atau Laravel Vapor untuk serverless.

Dengan mengikuti langkah‑langkah di atas, Anda memiliki proyek Laravel 11 yang siap produksi, menggunakan Vite, Breeze, dan Sanctum dengan best practice modern.

Laravel 11 memberikan fondasi yang kuat untuk pengembangan web modern. Dengan Vite sebagai bundler cepat, Breeze sebagai starter kit, serta Sanctum untuk otentikasi API yang ringan, Anda dapat membangun aplikasi yang scalable, maintainable, dan aman. Terapkan best practice seperti caching, queue, dan static analysis untuk meningkatkan kualitas kode dan performa produksi.

---

Tutorial step‑by‑step setup Laravel 11 terbaru dengan Vite, Breeze, dan Sanctum. Ikuti panduan instalasi, konfigurasi, contoh kode, dan best practice modern untuk proyek Laravel yang aman dan performant.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend