Setup Laravel 11 dengan Best Practice Modern: Vite, Breeze, Sanctum, dan TypeScript

Panduan lengkap instalasi Laravel 11 terbaru serta integrasi Vite, Breeze, Sanctum, dan TypeScript untuk pengembangan aplikasi web modern di tahun 2026.

1. Persiapan Lingkungan

Pastikan server Anda memiliki PHP 8.3+, Composer 2.7+, dan Node.js 20+. Verifikasi versi dengan perintah:

php -v
composer -V
node -v
npm -v

2. Instalasi Laravel 11

Gunakan Composer untuk membuat proyek baru:

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

Masuk ke folder proyek:

cd laravel-app

3. Setup Vite (Asset Bundler Modern)

Laravel 11 sudah menyertakan Vite secara default, tetapi pastikan dependensi terbaru terpasang:

npm install
npm install -D vite laravel-vite-plugin @vitejs/plugin-vue

Ubah vite.config.js jika ingin menambahkan TypeScript atau Vue:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

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

Jalankan dev server:

npm run dev

4. Instalasi Laravel Breeze dengan Tailwind & Vue

Breeze menyediakan scaffolding autentikasi ringan. Pilih stack vue untuk integrasi dengan Vite:

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

Jalankan migrasi database:

php artisan migrate

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

Instal Sanctum:

composer require laravel/sanctum

Publish konfigurasi dan migrasi:

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

Tambahkan middleware EnsureFrontendRequestsAreStateful::class ke grup api pada app/Http/Kernel.php:

\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,

Di file config/sanctum.php, pastikan stateful berisi domain front‑end Anda, contoh:

'stateful' => explode(",", env('SANCTUM_STATEFUL_DOMAINS', 'localhost,127.0.0.1')),

Gunakan guard sanctum di config/auth.php untuk API:

'guards' => [
    'api' => [
        'driver' => 'sanctum',
        'provider' => 'users',
    ],
],

6. Menggunakan TypeScript di Resources

Ubah file utama menjadi resources/js/app.ts dan tambahkan contoh:

import { createApp } from 'vue';
import ExampleComponent from './components/ExampleComponent.vue';

const app = createApp({});
app.component('example-component', ExampleComponent);
app.mount('#app');

Pastikan tsconfig.json ada di root proyek (Composer installer menambahkannya otomatis).

7. Best Practice Modern

• Environment Files: Simpan kunci API dan konfigurasi sensitif di .env dan gunakan env() di config.
• Cache Config & Routes: Setelah selesai develop, jalankan php artisan config:cache dan php artisan route:cache.
• Static Asset Versioning: Vite menambahkan hash otomatis; pastikan @vite dipanggil di Blade.
• Testing: Gunakan php artisan test dengan PHPUnit 11 dan Pest untuk testing unit & feature.
• Security: Aktifkan APP_DEBUG=false di produksi, gunakan HTTPS, dan konfigurasi CSP di middleware.

8. Deploy ke Production

1. Build assets: npm run build
2. Set environment: .env.production dan jalankan php artisan config:cache
3. Optimasi autoloader: composer install --optimize-autoloader --no-dev
4. Jalankan migrasi: php artisan migrate --force
5. Restart queue & cache (jika ada): php artisan queue:restart dan php artisan cache:clear

Dengan langkah‑langkah di atas, aplikasi Laravel 11 siap untuk skala modern, SPA, dan API yang aman.

Laravel 11 dengan Vite, Breeze, Sanctum, dan TypeScript menawarkan workflow pengembangan yang cepat, aman, dan ready‑to‑scale. Ikuti best practice di atas untuk menjaga performa, keamanan, dan kemudahan pemeliharaan di lingkungan produksi 2026.

---

Panduan lengkap setup Laravel 11 modern dengan Vite, Breeze, Sanctum, dan TypeScript. Langkah demi langkah, konfigurasi, contoh kode, dan best practice untuk 2026.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend