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

Pelajari cara menginstal Laravel 11 terbaru, mengkonfigurasi Vite, Breeze, dan Sanctum secara step‑by‑step untuk membangun aplikasi web modern dengan PHP Framework Laravel.

1. Prerequisite

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

2. Instalasi Laravel 11

composer create-project laravel/laravel blog-app "^11.0"

Masuk ke folder proyek:

cd blog-app

Penjelasan

Perintah di atas mengunduh kerangka kerja Laravel 11 yang stabil pada tahun 2026.

3. Setup Vite (Asset Bundler Modern)

Laravel 11 sudah menyertakan Vite secara default, tetapi pastikan dependensi npm ter‑install:

npm install
# atau yarn
yarn install

Konfigurasi Vite

Jika Anda membutuhkan konfigurasi tambahan, edit 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,
        }),
    ],
});

Menjalankan Dev Server

npm run dev
# atau yarn dev

Vite akan hot‑reload asset setiap perubahan.

4. Instalasi Laravel Breeze (Starter Kit UI)

composer require laravel/breeze --dev
php artisan breeze:install vue
# atau React: breeze:install react
npm install && npm run dev

Penjelasan

Breeze menyediakan scaffolding autentikasi (login, register, reset password) dengan TailwindCSS dan pilihan stack front‑end (Vue, React, Blade). Di contoh ini dipilih Vue.

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

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

Middleware & Kernel

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

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

Penggunaan Token Personal

// Membuat token
$token = $user->createToken('mobile-app')->plainTextToken;

// Menggunakan di request header
Authorization: Bearer {token}

6. Contoh Kode CRUD dengan Vue + Sanctum

Route API

use App\Http\Controllers\PostController;

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

Controller

namespace App\Http\Controllers;

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

class PostController extends Controller
{
    public function index() { return Post::latest()->paginate(10); }
    public function store(Request $request) {
        $post = Post::create($request->validate([
            'title' => 'required|string',
            'body' => 'required|string',
        ]));
        return response()->json($post, 201);
    }
    // show, update, destroy…
}

Vue Component (resources/js/components/PostList.vue)

<template>
  <div>
    <h1>Posts</h1>
    <ul>
      <li v-for="post in posts.data" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const posts = ref({});

onMounted(async () => {
  const response = await axios.get('/api/posts');
  posts.value = response.data;
});
</script>

Penjelasan Singkat

Axios otomatis mengirim cookie Laravel session karena Sanctum berada dalam mode SPA, sehingga request ter‑autentikasi.

7. Best Practice Modern

• Environment Segregation: gunakan .env.example dan CI/CD untuk inject variabel.
• Static Analysis: jalankan phpstan dan larastan tiap commit.
• Testing: gunakan phpunit untuk unit & integration test, serta Laravel Dusk untuk end‑to‑end.
• Cache & Queue: konfigurasi Redis sebagai driver cache dan queue (default di Laravel 11).
• Code Style: terapkan Laravel Pint untuk formatting otomatis.

8. Deploy ke Production (Laravel Vapor atau Traditional VPS)

1. Set APP_ENV=production dan CACHE_DRIVER=redis.
2. Compile assets: npm run build.
3. Jalankan migrasi: php artisan migrate --force.
4. Optimasi konfigurasi: php artisan config:cache, php artisan route:cache, php artisan view:cache.

Dengan mengikuti langkah‑langkah di atas, Anda memiliki proyek Laravel 11 yang terintegrasi Vite, Breeze, dan Sanctum—siap untuk pengembangan frontend modern, API yang aman, serta deployment skala production. Terapkan best practice seperti testing, static analysis, dan caching untuk menjaga kode tetap bersih, aman, dan performant.

---

Tutorial step‑by‑step setup Laravel 11 dengan Vite, Breeze, dan Sanctum. Panduan lengkap instalasi, konfigurasi, contoh kode, dan best practice modern untuk PHP Framework Laravel.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend