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

Pelajari cara menginstal Laravel versi terbaru (Laravel 11 pada 2026), mengkonfigurasi Vite, Breeze, Sanctum, serta Livewire secara terintegrasi untuk pengembangan aplikasi web modern.

1. Persiapan Lingkungan

Pastikan server Anda memenuhi persyaratan minimal:

• PHP >= 8.3
• Composer 2.7+
• Node.js >= 20.x & npm/yarn
• Database (MySQL 8.0+, PostgreSQL 15+, atau SQLite untuk development)

1.1 Instalasi Composer & Node

# Composer
curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

# Node.js (menggunakan nvm)
nvm install 20
nvm use 20
npm install -g npm

2. Membuat Proyek Laravel 11 Baru

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

Periksa versi:

php artisan --version

3. Mengganti Mix ke Vite (Default di Laravel 11)

Laravel 11 sudah menyertakan Vite sebagai bundler front‑end. Pastikan file vite.config.js ada dan package.json berisi script berikut:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

3.1 Install Dependensi Front‑end

npm install
npm run dev

Jika ingin menambahkan Tailwind CSS:

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

4. Menambahkan Laravel Breeze (Starter Kit)

Breeze menyediakan otentikasi ringan dengan Blade atau Inertia. Kita gunakan Blade + Livewire untuk integrasi modern.

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

Jalankan migrasi:

php artisan migrate

4.1 Mengaktifkan Email Verification (Opsional)

php artisan make:auth --verify

5. Mengintegrasikan Laravel Sanctum untuk API Token

Sanctum memungkinkan otentikasi SPA dan token‑based API.

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

5.1 Konfigurasi Middleware

Tambahkan EnsureFrontendRequestsAreStateful::class pada api middleware group di app/Http/Kernel.php:

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

5.2 Contoh Route API

use App\Http\Controllers\API\PostController;

Route::middleware('auth:sanctum')->group(function () {
    Route::apiResource('posts', PostController::class);
});

6. Menambahkan Livewire 3 (Versi Stabil 2026)

Livewire memudahkan pembuatan UI reaktif tanpa menulis JavaScript berlebih.

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

6.1 Membuat Komponen Livewire

php artisan make:livewire PostTable

File app/Http/Livewire/PostTable.php:

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Post;

class PostTable extends Component
{
    public $search = '';

    public function render()
    {
        $posts = Post::where('title', 'like', "%{$this->search}%")->latest()->paginate(10);
        return view('livewire.post-table', compact('posts'));
    }
}

View resources/views/livewire/post-table.blade.php:

<div>
    <input type="text" wire:model.debounce.500ms="search" placeholder="Cari judul..." class="border p-2 rounded">
    <table class="min-w-full mt-4">
        <thead>...</thead>
        <tbody>
            @foreach($posts as $post)
                <tr>
                    <td>{{ $post->id }}</td>
                    <td>{{ $post->title }}</td>
                    <td>{{ $post->created_at->format('Y-m-d') }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
    {{ $posts->links() }}
</div>

6.2 Menyisipkan Komponen ke Blade

<x-app-layout>
    <x-slot name="header">Daftar Post</x-slot>
    @livewire('post-table')
</x-app-layout>

7. Best Practice untuk Production

• Environment Configuration: gunakan .env.production terpisah, jangan pernah menyimpan APP_DEBUG=true di server.
• Cache Config & Routes:

  php artisan config:cache
  php artisan route:cache
  php artisan view:cache

• Optimized Assets: jalankan npm run build untuk Vite, lalu php artisan storage:link.
• Database Indexing: tambahkan indeks pada kolom yang sering dipakai di query pencarian.
• Security: aktifkan Sanctum CSRF protection, set SESSION_SECURE_COOKIE=true dan SANCTUM_STATEFUL_DOMAINS untuk domain SPA.
• Testing: gunakan Pest atau PHPUnit untuk fitur otentikasi dan Livewire, contoh:

  php artisan test --filter=LivewirePostTableTest

8. Deploy ke Server Linux (Laravel Forge / Vapor)

1. Push kode ke repository Git (GitHub/GitLab).
2. Di Forge, pilih “Create Site”, pilih PHP 8.3, pilih “Laravel” sebagai framework.
   • Set DEPLOY_BRANCH=main dan enable “Zero‑Downtime Deployment”.
3. Tambahkan script post‑deploy:

   npm ci --production
   npm run build
   php artisan migrate --force
   php artisan config:cache
   php artisan route:cache
   php artisan view:cache

4. Pastikan queue worker untuk job‑queue (mis. php artisan queue:work --daemon) jika menggunakan event‑driven fitur.

9. Verifikasi Instalasi

Buka http://your-domain.test di browser. Anda harus melihat halaman login Breeze, dapat register, login, dan melihat tabel post yang dikelola Livewire. Coba request API dengan token Sanctum via Postman untuk memastikan otentikasi token berfungsi.

Dengan mengikuti langkah‑langkah di atas, Anda telah berhasil menyiapkan Laravel 11 yang modern—menggunakan Vite untuk asset bundling, Breeze untuk otentikasi cepat, Sanctum untuk API token, dan Livewire untuk UI interaktif. Kombinasi ini memberikan fondasi yang kuat, scalable, dan aman untuk proyek web di era 2026.

---

Tutorial lengkap setup Laravel 11 dengan Vite, Breeze, Sanctum, dan Livewire. Ikuti langkah demi langkah, konfigurasi best practice, dan contoh kode siap pakai untuk pengembangan modern.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend