Panduan Lengkap Setup Laravel 10 Modern dengan Vite, Breeze, dan Sanctum (2026)

Ikuti langkah demi langkah tutorial ini untuk menginstal Laravel 10 terbaru, mengkonfigurasi Vite sebagai bundler front‑end, menambahkan Breeze untuk scaffolding UI, serta mengamankan API dengan Sanctum.

1. Persiapan Lingkungan

Pastikan server Anda telah memenuhi persyaratan minimum Laravel 10:

• PHP >= 8.2
• Composer 2.7+
• Node.js >= 20 dan npm/yarn
• Database MySQL 8+, PostgreSQL 15+, atau SQLite

1.1. Instalasi Composer dan Laravel Installer (opsional)

composer global require laravel/installer
export PATH="$HOME/.config/composer/vendor/bin:$PATH"

2. Membuat Proyek Laravel Baru

laravel new blog --jetstream=livewire --stack=vite
# atau tanpa installer
composer create-project --prefer-dist laravel/laravel blog "10.*"
cd blog

Perintah di atas otomatis menyiapkan Vite sebagai asset bundler.

3. Menginstall Vite (Jika belum terpasang)

# Pastikan package.json berisi dependensi berikut
npm install --save-dev vite laravel-vite-plugin

# Jalankan dev server
npm run dev

Vite akan memuat file resources/js/app.js dan resources/css/app.css dengan hot‑module‑replacement.

4. Menambahkan Laravel Breeze (Frontend Ringan)

composer require laravel/breeze --dev
php artisan breeze:install vue
# atau pilih blade, react, atau vue sesuai kebutuhan
npm install && npm run dev
php artisan migrate

Breeze menyediakan route, controller, dan view sederhana untuk autentikasi.

5. Menyiapkan 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 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. Menambahkan Guard di config/auth.php

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

5.4. Contoh Endpoint API yang Dilindungi

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

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

6. Testing dengan Postman / VSCode Thunder Client

1. Login via /login (Breeze) untuk mendapatkan session cookie.
2. Kirim request GET /api/user/posts dengan cookie yang sama.
3. Jika berhasil, Anda akan menerima JSON post milik user.

7. Best Practice Modern

• Environment Variables: Simpan kunci API dan credential di .env, never commit.
• Laravel Octane (optional): Untuk performa tinggi, pertimbangkan php artisan octane:start --server=swoole setelah semua tested.
• Code Styling: Gunakan pint (Laravel Pint) untuk standar coding.

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

• Testing: Tambahkan Feature Test untuk Sanctum.

  php artisan test --filter=SanctumAuthTest

8. Deploy ke Production

1. Set APP_ENV=production dan APP_DEBUG=false.
2. Jalankan php artisan config:cache, php artisan route:cache, php artisan view:cache.
3. Build assets: npm run build (Vite menghasilkan file di public/build).
4. Gunakan web server (NGINX/Apache) yang diarahkan ke public/ directory.

Dengan mengikuti tutorial ini, Anda telah menyiapkan Laravel 10 yang modern, memanfaatkan Vite untuk front‑end yang cepat, Breeze untuk UI autentikasi yang bersih, serta Sanctum untuk melindungi API. Kombinasi ini merupakan best practice pada 2026, siap skalabilitas, keamanan, dan pengembangan cepat.

---

Tutorial step-by-step setup Laravel 10 dengan Vite, Breeze, dan Sanctum. Panduan instalasi, konfigurasi, contoh kode, dan best practice modern untuk pengembangan web PHP Framework di 2026.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend