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

Ikuti langkah demi langkah untuk menginstal Laravel 11 terbaru, mengintegrasikan Vite, Breeze, dan Sanctum, serta menerapkan best practice dalam pengembangan aplikasi web modern.

1. Prasyarat

• PHP >= 8.2
• Composer terbaru
• Node.js >= 20 & npm atau Yarn
• Database (MySQL 8+, PostgreSQL, atau SQLite)

2. Instalasi Laravel 11

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

Masuk ke folder proyek:

cd my-app

2.1. Inisialisasi Git (opsional tetapi direkomendasikan)

git init
git add .
git commit -m "Initial commit - Laravel 11 setup"

3. Konfigurasi Vite (frontend bundler default)

Laravel 11 sudah menyertakan Vite. Pastikan file vite.config.js ada. Jika tidak, jalankan:

npm install --save-dev vite laravel-vite-plugin

Update vite.config.js:

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

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

3.1. Install dependencies UI

npm install && npm run dev

Pastikan resources/js/app.js memuat:

import './bootstrap';
import '../css/app.css';

4. Instalasi Laravel Breeze (Starter Kit)

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

Perintah di atas menginstal Breeze dengan Vue 3 (pilihan lain: react, blade). Setelah selesai, jalankan:

npm install && npm run dev
php artisan migrate

4.1. Struktur Auth

Breeze menyediakan rute, controller, dan view untuk registrasi, login, verifikasi email, dan reset password. Semua berada di app/Http/Controllers/Auth dan resources/views/auth.

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

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

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. Konfigurasi CORS

Update config/cors.php agar domain front‑end (mis. http://localhost:5173) diizinkan:

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

5.5. Membuat API Guard

Di config/auth.php tambahkan guard sanctum jika belum ada:

'guards' => [
    'web' => [
        'driver' => 'session',
        'provider' => 'users',
    ],
    'sanctum' => [
        'driver' => 'sanctum',
        'provider' => 'users',
    ],
],

5.6. Contoh Endpoint API

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

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

5.7. Frontend (Vue) – Login via Sanctum

Di resources/js/app.js atau component Vue:

import axios from 'axios';
axios.defaults.withCredentials = true;

export async function login(email, password) {
    await axios.get('/sanctum/csrf-cookie'); // set CSRF token
    const { data } = await axios.post('/login', { email, password });
    return data;
}

6. Best Practice Modern

• Environment management: gunakan .env.example yang lengkap, jangan pernah commit file .env.
• Database migrations: selalu buat migration terpisah untuk tiap fitur, dan push ke version control.
• Testing: gunakan Pest atau PHPUnit. Contoh:

  php artisan test

• Code style: pasang laravel/pint untuk formatting otomatis.

  composer require --dev laravel/pint
  ./vendor/bin/pint

• Docker: untuk tim, siapkan docker-compose.yml dengan layanan php, mysql, redis, dan npm.
• Git hooks: gunakan Husky untuk menjalankan lint & test sebelum commit.

7. Deployment (contoh di Laravel Vapor atau VPS)

1. Build assets: npm run build
2. Set environment variables di server.
3. Jalankan php artisan migrate --force setelah upload.
4. Pastikan storage link: php artisan storage:link

Dengan mengikuti semua langkah di atas, Anda memiliki aplikasi Laravel 11 yang modern, ringan, dan siap skala.

Laravel 11 bersama Vite, Breeze, dan Sanctum memberikan fondasi yang kuat untuk aplikasi web modern. Dengan mengikuti best practice seperti environment management, testing, dan CI/CD, tim dapat mempercepat pengembangan sambil menjaga kualitas kode. Mulailah proyek Anda dengan tutorial ini dan eksplorasi fitur lanjutan Laravel untuk menambah nilai bisnis.

---

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

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend