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

Temukan langkah demi langkah instalasi Laravel 11 terkini serta integrasi Vite, Breeze, Sanctum, dan tool modern lainnya untuk memulai proyek PHP Framework yang optimal.

1. Persiapan Lingkungan

1.1. Prasyarat Sistem

Pastikan Anda memiliki:

• PHP >= 8.2
• Composer terbaru
• Node.js >= 20 (LTS)
• Database (MySQL 8.x atau PostgreSQL)

1.2. Install Composer & Node

Jika belum terpasang, jalankan:

curl -sS https://getcomposer.org/installer | php
npm install -g npm@latest

2. Membuat Project Laravel 11

2.1. Install Laravel Installer (opsional)

composer global require laravel/installer

2.2. Buat Project Baru

laravel new myapp --jetstream

Atau tanpa installer:

composer create-project --prefer-dist laravel/laravel:^11.0 myapp

3. Konfigurasi Vite (Asset Bundler Modern)

3.1. Install Dependencies

cd myapp
npm install

3.2. Sesuaikan vite.config.js

Laravel 11 sudah menyertakan konfigurasi default, namun pastikan ada plugin Laravel Vite:

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

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

3.3. Jalankan Dev Server

npm run dev

Vite akan melayani asset secara hot‑reloading.

4. Instalasi Laravel Breeze (Starter Kit UI)

4.1. Pilih Stack

Breeze mendukung Blade, React, Vue, dan Inertia. Contoh menggunakan Blade + Tailwind:

composer require laravel/breeze --dev
php artisan breeze:install blade
npm install && npm run dev
php artisan migrate

4.2. Verifikasi

Buka http://localhost:8000/register dan pastikan form registrasi tampil.

5. Mengamankan API dengan Laravel Sanctum

5.1. Install Sanctum

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

5.2. Konfigurasi Middleware

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

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

5.3. Membuat Route API

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

5.4. Menggunakan Token di Frontend

Contoh dengan Fetch API:

fetch('/sanctum/csrf-cookie', { credentials: 'include' })
  .then(() => fetch('/api/user', { credentials: 'include' }))
  .then(res => res.json())
  .then(user => console.log(user));

6. Best Practice Modern

• Environment Variables: Simpan rahasia di .env dan gunakan config:cache untuk produksi.
• Database Migrations & Seeders: Selalu versioning schema dengan php artisan migrate --seed.
• Testing: Gunakan Pest atau PHPUnit, contoh php artisan test.
• Code Style: Terapkan Laravel Pint (composer require laravel/pint --dev) dan jalankan vendor/bin/pint.
• Caching: Aktifkan route cache (php artisan route:cache) dan config cache (php artisan config:cache) pada produksi.
• Docker: Buat Dockerfile dan docker‑compose untuk konsistensi lingkungan dev/production.

7. Deploy ke Production

1. Push kode ke repository (GitHub, GitLab).
2. Build assets: npm run build.
3. Upload ke server, set APP_ENV=production dan APP_DEBUG=false.
4. Run optimizations:
   php artisan migrate --force
php artisan config:cache
php artisan route:cache
php artisan view:cache
5. Configure web server (NGINX) untuk mengarahkan semua request ke public/index.php.

Dengan mengikuti langkah‑step ini, Anda memiliki aplikasi Laravel 11 yang terstruktur, cepat berkat Vite, aman dengan Sanctum, serta siap untuk skala produksi. Terapkan best practice modern untuk menjaga kualitas kode dan performa proyek PHP Framework Anda.

---

Tutorial lengkap setup Laravel 11 dengan Vite, Breeze, Sanctum, dan best practice modern. Panduan step-by-step untuk developer PHP Framework di 2026.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend