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

Panduan lengkap langkah demi langkah untuk menginstal Laravel 11 terbaru, mengkonfigurasi Vite, Breeze, Sanctum, serta menambahkan Livewire untuk pengembangan aplikasi full‑stack modern.

1. Prasyarat

Pastikan sistem Anda memiliki:

• PHP >= 8.2
• Composer terbaru
• Node.js >= 20 & npm/yarn
• Database (MySQL, PostgreSQL, atau SQLite)

2. Instalasi Laravel 11

composer create-project laravel/laravel blog "11.*" --prefer-dist
cd blog

Perintah di atas membuat project blog dengan Laravel 11 stabil.

3. Setup Vite (Asset Bundler bawaan)

Laravel 11 sudah menyertakan Vite secara default. Pastikan vite.config.ts ada dan jalankan:

npm install
npm run dev

Anda dapat menyesuaikan resources/css/app.css dan resources/js/app.js sesuai kebutuhan.

4. Instalasi Laravel Breeze (Starter Kit)

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

Breeze menyediakan scaffolding autentikasi dengan Vue 3 + Vite. Jika ingin Blade, gunakan php artisan breeze:install tanpa parameter.

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

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

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

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

Gunakan auth:sanctum pada route API yang memerlukan proteksi.

6. Menambahkan Livewire (Komponen Interaktif)

composer require livewire/livewire
php artisan livewire:publish --assets

Livewire bekerja bersamaan dengan Blade. Contoh komponen:

php artisan make:livewire Counter

File app/Http/Livewire/Counter.php:

namespace App\Http\Livewire;
use Livewire\Component;
class Counter extends Component {
    public $count = 0;
    public function increment() { $this->count++; }
    public function render() { return view('livewire.counter'); }
}

View resources/views/livewire/counter.blade.php:

<div>
    <button wire:click="increment">Tambah</button>
    <span>{{ $count }}</span>
</div>

Masukkan @livewire('counter') pada halaman Blade mana pun.

7. Environment & Konfigurasi Keamanan

• Set APP_ENV=production dan APP_DEBUG=false pada produksi.
• Generate key: php artisan key:generate
• Konfigurasi config/session.php untuk same_site dan secure ketika menggunakan HTTPS.
• Gunakan rate limiting pada route login: Route::post('/login', [AuthController::class, 'login'])->middleware('throttle:5,1');

8. Testing & Deployment

# Unit & Feature Test
php artisan test

# Optimasi produksi
php artisan optimize:clear
php artisan config:cache
php artisan route:cache
php artisan view:cache

# Build assets untuk prod
npm run build

Deploy ke server dengan PHP-FPM & Nginx, pastikan public/.htaccess (Apache) atau konfigurasi Nginx mengarah ke public directory.

9. Best Practice Tambahan

• Gunakan phpstan atau psalm untuk static analysis.
• Integrasikan CI/CD (GitHub Actions) untuk lint, test, dan deploy otomatis.
• Simpan environment variables di .env.example dan gunakan dotenv manager.
• Gunakan queue driver (Redis) untuk email, jobs, dan event broadcasting.
• Aktifkan log:clear dan rotasi log via logrotate.

Dengan mengikuti langkah‑step di atas, Anda akan memiliki aplikasi Laravel 11 yang modern, aman, dan siap untuk skala produksi. Kombinasi Vite, Breeze, Sanctum, dan Livewire memberikan fondasi front‑end reaktif sekaligus API yang kuat, sementara best practice tambahan memastikan kode tetap bersih dan dapat dipelihara.

---

Panduan setup Laravel 11 terbaru dengan Vite, Breeze, Sanctum, dan Livewire. Langkah demi langkah, konfigurasi, contoh kode, dan best practice modern untuk pengembangan web PHP.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend