Panduan Lengkap Setup Laravel 11 dengan Best Practice Modern (Vite, Breeze, Sanctum, & Livewire)

Ikuti tutorial step‑by‑step ini untuk menginstal Laravel 11 terbaru, mengkonfigurasi Vite, Breeze, Sanctum, dan Livewire sehingga aplikasi Anda siap produksi dengan arsitektur modern.

1. Prasyarat

• PHP 8.3 atau lebih tinggi
• Composer 2.x
• Node.js 20.x & npm 10.x
• Database MySQL/PostgreSQL (opsional untuk contoh)

2. Instalasi Laravel 11

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

Masuk ke folder proyek:

cd laravel-modern

2.1. Verifikasi instalasi

php artisan --version

Output harus menampilkan Laravel Framework 11.x.x.

3. Setup Frontend dengan Vite

Laravel 11 sudah menggunakan Vite secara default, tetapi pastikan dependensi ter‑install.

npm install
npm run dev

Jika ingin menambahkan TailwindCSS:

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

Konfigurasi tailwind.config.js:

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

4. Instalasi Laravel Breeze (Starter Kit)

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

Perintah di atas menambahkan autentikasi berbasis Vue 3 + Vite. Jalankan migrasi:

php artisan migrate

Compile assets:

npm run dev

4.1. Menjalankan server

php artisan serve

Akses http://127.0.0.1:8000 – halaman login/register Breeze sudah tersedia.

5. Menambahkan Laravel Sanctum untuk API Token

composer require laravel/sanctum

Publikasikan konfigurasi dan migrasi:

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

Aktifkan middleware di app/Http/Kernel.php:

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

5.1. Contoh endpoint API

use App\Models\User;
use Laravel\Sanctum\HasApiTokens;

Route::post('/sanctum/token', function (Request $request) {
    $request->validate([
        'email' => 'required|email',
        'password' => 'required',
        'device_name' => 'required',
    ]);

    $user = User::where('email', $request->email)->first();
    if (! $user || ! Hash::check($request->password, $user->password)) {
        return response()->json(['message' => 'Invalid credentials'], 401);
    }

    $token = $user->createToken($request->device_name)->plainTextToken;
    return response()->json(['token' => $token]);
});

6. Integrasi Livewire 3 (Realtime UI)

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

Livewire bekerja mulus dengan Vite. Tambahkan script di resources/js/app.js:

import { Livewire, Alpine } from './bootstrap';
window.Livewire = Livewire;
window.Alpine = Alpine;
Alpine.start();

6.1. Contoh komponen Livewire

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 style="text-align:center">
    <h1>Count: {{ $count }}</h1>
    <button wire:click="increment" class="px-4 py-2 bg-blue-600 text-white">Tambah</button>
</div>

Sisipkan di Blade mana saja:

<livewire:counter />

7. Best Practice Modern

• Environment variables: Simpan kunci API, DB, dan Sanctum JWT di .env – jangan hard‑code.
• Cache config & routes pada produksi: php artisan config:cache && php artisan route:cache
• Optimized autoload: composer install --optimize-autoloader --no-dev
• Docker (opsional): gunakan image resmi php:8.3-fpm dengan composer dan node untuk build CI/CD.
• Testing: Laravel Pest atau PHPUnit – contoh test API token.

8. Deployment Ringkas

git clone https://github.com/username/laravel-modern.git
cd laravel-modern
composer install --no-dev --optimize-autoloader
npm ci && npm run build
php artisan migrate --force
php artisan config:cache
php artisan route:cache

Pastikan server web (NGINX/Apache) menunjuk ke public folder dan file .env dikonfigurasi dengan benar.

Dengan mengikuti langkah‑langkah di atas, Anda kini memiliki aplikasi Laravel 11 yang terstruktur dengan Vite, Breeze, Sanctum, dan Livewire. Kombinasi ini memberi fondasi clean code, autentikasi API modern, serta UI interaktif, siap untuk skala produksi dan tim pengembang modern.

---

Tutorial lengkap setup Laravel 11 dengan Vite, Breeze, Sanctum, dan Livewire. Panduan step-by-step, konfigurasi, contoh kode, dan best practice modern untuk pengembangan web dengan Laravel, PHP Framework, Web Development.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend