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

Tutorial step-by-step untuk menginstal Laravel 11 terbaru, mengkonfigurasi Vite, Breeze UI, dan Sanctum API authentication dengan standar keamanan dan performa terkini tahun 2026.

1. Persiapan Lingkungan

1.1. Sistem Operasi & Prasyarat

• OS: Ubuntu 22.04 LTS atau Windows 11
• PHP >= 8.3, ekstensi: OpenSSL, PDO, Mbstring, Tokenizer, XML, Ctype, JSON, Bcmath, GD
• Composer 2.8+
• Node.js 20.x dan npm 10.x
• Database: MySQL 8 atau PostgreSQL 15

1.2. Instalasi Composer & Node

# Composer
curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

# Node.js & npm (via nvm)
nvm install 20
nvm use 20

2. Membuat Project Laravel 11

composer create-project laravel/laravel laravel11-app "^11.0"
cd laravel11-app

2.1. Verifikasi Instalasi

php artisan --version
# Output: Laravel Framework 11.x.x

3. Mengatur Vite (Asset Bundler bawaan)

3.1. Instalasi Dependensi Frontend

npm install

3.2. Konfigurasi vite.config.js

Laravel 11 sudah menyertakan konfigurasi standar. Tambahkan alias untuk Vue 3 (jika diperlukan).

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,
        }),
    ],
    resolve: {
        alias: {
            '@': '/resources/js',
        },
    },
});

3.3. Menjalankan Development Server

npm run dev
# Vite akan melayani assets pada http://localhost:5173

4. Menambahkan Laravel Breeze (Starter Kit UI)

4.1. Instalasi Breeze dengan Blade

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

4.2. Opsi: Breeze dengan Inertia + Vue 3

# Pilih stack Inertia+Vue
php artisan breeze:install vue
npm install && npm run dev

4.3. Verifikasi Tampilan

Jalankan php artisan serve dan buka http://127.0.0.1:8000. Anda akan melihat halaman beranda Breeze yang sudah ter‑styled.

5. Mengintegrasikan Laravel Sanctum untuk API Authentication

5.1. Instalasi Sanctum

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

5.2. Konfigurasi Middleware

Tambahkan EnsureFrontendRequestsAreStateful::class pada grup middleware api di app/Http/Kernel.php jika Anda menggunakan SPA.

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

5.3. Membuat Route API Terproteksi

// routes/api.php
use AppHttpControllersProfileController;

Route::middleware('auth:sanctum')->get('/user', [ProfileController::class, 'show']);

5.4. Membuat Controller

php artisan make:controller ProfileController

// app/Http/Controllers/ProfileController.php
json($request->user());
    }
}

5.5. Frontend – Mengirim Token

Jika menggunakan Breeze Vue, contoh di resources/js/app.js:

import axios from 'axios';
axios.defaults.withCredentials = true;
axios.get('/sanctum/csrf-cookie').then(() => {
    // Sekarang dapat mengakses endpoint
    axios.get('/api/user').then(response => console.log(response.data));
});

6. Best Practice Modern (2026)

• Environment Files: Simpan rahasia di .env dan gunakan env() di config.
• Cache Config & Routes: php artisan config:cache & php artisan route:cache pada production.
• Queue & Jobs: Gunakan Laravel Queue (Redis) untuk proses async seperti email.
• Testing: Tuliskan Feature Test dengan Pest atau PHPUnit untuk API endpoint Sanctum.
li>Static Analysis: Integrasikan PHPStan & Laravel Pint untuk coding standard.
• Docker: Deploy menggunakan Laravel Sail (Docker) untuk konsistensi lingkungan.

7. Deploy ke Production

1. Build assets: npm run build
2. Set APP_ENV=production dan APP_DEBUG=false
3. Cache konfigurasi & route.
4. Gunakan php artisan migrate --force dan php artisan storage:link.
5. Setup queue worker: php artisan queue:work --daemon.

Dengan mengikuti langkah‑langkah di atas, Anda memiliki proyek Laravel 11 yang modern, siap untuk pengembangan SPA atau API, menggunakan Vite untuk aset cepat, Breeze sebagai UI starter kit, serta Sanctum untuk otentikasi token yang aman. Terapkan best practice seperti caching, queue, dan static analysis untuk memastikan aplikasi production‑ready di tahun 2026.

---

Tutorial lengkap setup Laravel 11 dengan Vite, Breeze, dan Sanctum. Langkah demi langkah instalasi, konfigurasi, contoh kode, dan best practice modern untuk pengembangan web 2026.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend