Panduan Lengkap Setup Laravel 10 dengan Best Practice Modern: Vite, Breeze, Sanctum, dan Jetstream

Tutorial step‑by‑step untuk menginstal Laravel 10 terbaru, mengonfigurasi Vite, menambahkan Breeze untuk scaffold UI, serta mengamankan API dengan Sanctum.

1. Persyaratan Sistem

• PHP >= 8.2
• Composer 2.x
• Node.js >= 18 & npm/yarn
• Database MySQL/PostgreSQL

2. Instalasi Laravel 10

composer create-project laravel/laravel contoh-app "10.*"

Masuk ke folder proyek:

cd contoh-app

Penjelasan

Perintah di atas mengunduh Laravel 10 dengan semua dependensi standar.

3. Mengatur Vite (Asset Bundler Modern)

1. Hapus webpack.mix.js (jika ada) dan pastikan vite.config.js berada di root.
2. Instal dependensi Vite dan plugin Laravel:

npm install --save-dev vite laravel-vite-plugin
npm install --save-dev @vitejs/plugin-react # optional for React

Konfigurasi vite.config.js

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

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

Penjelasan

Plugin ini menyatukan Vite dengan Laravel Mix‑compatible API, memungkinkan hot‑module‑replacement (HMR) selama development.

4. Scaffold UI dengan Laravel Breeze

1. Instal Breeze via Composer:

composer require laravel/breeze --dev

2. Jalankan instalasi scaffold Blade (atau pilih Inertia/React/Vue):

php artisan breeze:install blade
# atau untuk React: php artisan breeze:install react
# atau Vue: php artisan breeze:install vue

3. Install npm dependencies dan compile aset:

npm install
npm run dev   # atau npm run build untuk produksi

Penjelasan

Breeze memberikan routing, controller, view, dan autentikasi dasar yang sudah siap pakai.

5. Mengamankan API dengan Laravel Sanctum

1. Instal Sanctum:

composer require laravel/sanctum

2. Publish konfigurasi dan migration:

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

3. Tambahkan middleware EnsureFrontendRequestsAreStateful ke api guard (file app/Http/Kernel.php):

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

4. Konfigurasi guard di config/auth.php:

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

Contoh Endpoint API

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

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

Penjelasan

Sanctum memungkinkan autentikasi token stateless untuk SPA atau mobile app, sekaligus menjaga session‑based guard untuk traditional Laravel Blade.

6. Menjalankan Server Development

php artisan serve   # Laravel development server
npm run dev        # Vite HMR

Kunjungi http://127.0.0.1:8000 untuk melihat aplikasi dengan autentikasi lengkap.

7. Best Practice Modern

• Environment Variables: Simpan kunci API & DB credentials di .env dan jangan pernah commit file tersebut.
• Cache Config & Routes: Pada production jalankan php artisan config:cache dan php artisan route:cache.
• HTTPS & CSP: Aktifkan APP_URL=https://domain.com dan gunakan middleware SecureHeaders untuk Content‑Security‑Policy.
• Testing: Tuliskan feature test menggunakan Pest atau PHPUnit untuk memastikan autentikasi Sanctum berfungsi.
• Code Formatting: Gunakan php artisan ide-helper:generate dan npm run lint untuk menjaga standar kode.

8. Deploy ke Production (Contoh dengan Laravel Forge)

1. Push kode ke repository Git (GitHub/GitLab).
2. Buat site baru di Forge, pilih PHP 8.2, dan hubungkan repository.
3. Set environment variables di Forge (APP_ENV=production, APP_DEBUG=false, DB_...).
4. Jalankan perintah deployment script otomatis:

composer install --optimize-autoloader --no-dev
php artisan migrate --force
php artisan cache:clear
npm ci
npm run build
php artisan config:cache
php artisan route:cache

Penjelasan

Langkah-langkah di atas memastikan aplikasi berjalan dengan Vite assets yang sudah digenerate, serta semua cache di‑optimalkan.

Dengan mengikuti tutorial ini, Anda sudah memiliki proyek Laravel 10 yang modern, cepat berkat Vite, dilengkapi UI standar lewat Breeze, serta aman untuk API melalui Sanctum. Terapkan best practice di atas untuk menjaga keamanan, performa, dan skalabilitas aplikasi Laravel Anda di lingkungan produksi.

---

Tutorial lengkap setup Laravel 10 dengan Vite, Breeze, dan Sanctum. Langkah instalasi, konfigurasi, contoh kode, serta best practice modern untuk pengembangan web dengan PHP Framework terbaik.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend