Setup Laravel 11 dengan Vite, Breeze, dan Sanctum: Panduan Praktis 2026

Pelajari cara menginstal Laravel versi terbaru, mengkonfigurasi Vite, menambahkan Breeze untuk otentikasi UI, dan mengamankan API dengan Sanctum dalam satu tutorial step‑by‑step yang up‑to‑date di tahun 2026.

1. Prasyarat

Pastikan sistem Anda memiliki:

• PHP >= 8.3
• Composer 2.x
• Node.js >= 20 dengan npm atau Yarn
• Database MySQL 8 atau PostgreSQL 15

2. Instalasi Laravel 11

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

Perintah di atas mengunduh Laravel 11 (stabil pada 2026) ke folder my-app.

2.1. Masuk ke direktori proyek

cd my-app

3. Setup Vite (Asset Bundler bawaan)

Laravel 11 sudah menyertakan Vite secara default, hanya perlu menyesuaikan vite.config.js jika memakai Tailwind atau Vue.

3.1. Install dependensi front‑end

npm install
# atau yarn
yarn install

3.2. Tambahkan Tailwind CSS (opsional)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Edit tailwind.config.js:

module.exports = {
    content: [
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    theme: { extend: {} },
    plugins: [],
};

3.3. Jalankan dev server

npm run dev

Vite akan melayani aset pada http://localhost:5173.

4. Instalasi Laravel Breeze (Starter Kit UI)

composer require laravel/breeze --dev
php artisan breeze:install blade
# atau dengan Inertia + Vue
# php artisan breeze:install vue

Perintah di atas menyiapkan route, controller, view Blade, serta scaffolding autentikasi dasar.

4.1. Build aset UI

npm run dev

4.2. Migrasi database

php artisan migrate

Anda kini memiliki halaman register, login, dan dashboard standar.

5. Tambahkan Laravel Sanctum untuk API Token

Sanctum memungkinkan otentikasi SPA dan token API personal.

5.1. Install Sanctum

composer require laravel/sanctum

5.2. Publikasi konfigurasi & migrasi

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

5.3. Tambahkan middleware ke api stack

Di app/Http/Kernel.php, pastikan:

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

5.4. Buat route API contoh

// routes/api.php
use App\Http\Controllers\API\ProfileController;

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

5.5. Controller contoh

namespace App\Http\Controllers\API;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class ProfileController extends Controller
{
    public function show(Request $request)
    {
        return response()->json($request->user());
    }
}

5.6. Menghasilkan token di aplikasi SPA

axios.post('/login', {email, password})
    .then(response => {
        return axios.post('/sanctum/token', {
            token_name: 'my-spa-token',
            abilities: ['*']
        });
    })
    .then(res => {
        localStorage.setItem('token', res.data.token);
    });

6. Best Practice Modern

• Environment Variables: Simpan kunci API, DB password, dan SANCTUM_STATEFUL_DOMAINS di .env bukan di kode.
• Cache Config & Routes: php artisan config:cache dan php artisan route:cache untuk produksi.
• Gunakan Laravel Octane (optional):> Jika beban tinggi, jalankan dengan Swoole atau RoadRunner untuk performa lebih baik.
• CI/CD: Integrasikan dengan GitHub Actions; jalankan php artisan test dan npm run lint pada setiap push.
• Logging: Konfigurasikan log:stack dengan Laravel Telescope untuk debugging real‑time.

7. Deploy ke Production

1. Set APP_ENV=production dan APP_DEBUG=false di .env.
2. Jalankan composer install --optimize-autoloader --no-dev.
3. Build aset produksi: npm run build.
4. Migrasi database: php artisan migrate --force.
5. Cache konfigurasi & route kembali.
6. Pastikan permission folder storage dan bootstrap/cache sudah benar.

Setelah langkah di atas selesai, aplikasi Laravel 11 Anda siap melayani traffic dengan Vite, Breeze, dan Sanctum yang terintegrasi secara modern.

Dengan mengikuti langkah‑step tersebut, Anda memiliki fondasi Laravel 11 yang up‑to‑date, menggunakan Vite untuk aset cepat, Breeze untuk UI autentikasi, dan Sanctum untuk keamanan API. Kombinasi ini mencerminkan best practice Laravel pada 2026, memudahkan pengembangan SPA modern serta skalabilitas jangka panjang.

---

Tutorial lengkap setup Laravel 11 dengan Vite, Breeze, dan Sanctum di 2026. Ikuti panduan step‑by‑step instalasi, konfigurasi, contoh kode, dan best practice modern untuk proyek PHP Framework terkini.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend