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

Pelajari cara menginstal Laravel 11 secara bersih, mengintegrasikan Vite sebagai bundler, Breeze untuk starter kit, Sanctum untuk otentikasi API, serta menyiapkan Tanstack Query untuk state management front‑end.

1. Prasyarat

• PHP 8.3+ (disarankan 8.3.2 atau lebih baru)
• Composer 2.7+
• Node.js 20.x dan npm 10.x
• Database MySQL 8 atau PostgreSQL 15

2. Instalasi Laravel 11

composer create-project laravel/laravel:^11 my-app

Masuk ke folder proyek:

cd my-app

3. Konfigurasi Environment

cp .env.example .env

Ubah pengaturan database, APP_URL, dan SANCTUM_STATEFUL_DOMAINS (jika menggunakan SPA):

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:{{generate}}
APP_DEBUG=true
APP_URL=http://localhost:8000

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel11
DB_USERNAME=root
DB_PASSWORD=

SANCTUM_STATEFUL_DOMAINS=localhost:3000,localhost:8000

4. Install & Setup Vite

Laravel 11 sudah menyertakan Vite secara default, cukup install dependensi front‑end:

npm install
npm run dev

Pastikan vite.config.js berisi plugin Laravel Vite:

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

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

5. Install Breeze (Blade & Inertia)

Untuk contoh ini gunakan Breeze dengan Blade (lebih ringan) dan Sanctum.

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

Setelah migration selesai, Anda sudah memiliki auth UI standar.

6. Integrasi Laravel Sanctum

Sanctum sudah terinstall oleh Breeze, lakukan langkah berikut:

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

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

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

Setelah itu, buat route API contoh:

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

7. Setup Front‑End SPA dengan Vite + Vue 3 (Opsional)

npm install vue@next @vitejs/plugin-vue
# Tambahkan plugin ke vite.config.js
import vue from '@vitejs/plugin-vue';
export default defineConfig({
    plugins: [laravel([...]), vue()],
});
# Buat resources/js/app.js
import { createApp } from 'vue';
import ExampleComponent from './components/ExampleComponent.vue';
createApp({
    components: { ExampleComponent }
}).mount('#app');

8. State Management dengan Tanstack Query (React) atau Vue Query (Vue)

Jika menggunakan Vue, install:

npm install @tanstack/vue-query

Contoh penggunaan untuk mengambil data user terautentikasi:

import { useQuery } from '@tanstack/vue-query';
import axios from 'axios';

export default {
  setup() {
    const { data, isLoading } = useQuery(['user'], () =>
      axios.get('/api/user').then(res => res.data)
    );
    return { data, isLoading };
  }
};

9. Best Practice

• Environment segregation: gunakan .env.testing untuk CI, dan pastikan APP_DEBUG=false di produksi.
• Cache configuration: jalankan php artisan config:cache dan php artisan route:cache setelah deploy.
• Static assets: gunakan npm run build untuk menghasilkan aset produksi, kemudian php artisan storage:link untuk file upload.
• Security: aktifkan helmet di server, set SESSION_SECURE_COOKIE=true, dan gunakan HTTPS.
• Testing: manfaatkan Pest atau PHPUnit, contoh: php artisan test untuk memastikan fitur auth berfungsi.

10. Deploy ke Production (Laravel 11 + Vite)

# Build assets
npm run build
# Optimasi Laravel
php artisan optimize:clear
php artisan config:cache
php artisan route:cache
php artisan view:cache
# Migrate DB
php artisan migrate --force
# Set proper permissions
chown -R www-data:www-data storage bootstrap/cache

Setelah selesai, pastikan server web (nginx atau Apache) mengarahkan semua request ke public/index.php dan mendukung WebSockets bila menggunakan Laravel Echo.

Dengan mengikuti langkah‑langkah di atas, Anda memiliki aplikasi Laravel 11 yang modern, terstruktur, dan siap produksi. Vite memberi kecepatan pengembangan front‑end, Breeze menyediakan starter kit authentication, Sanctum mengamankan API, dan integrasi Tanstack Query memudahkan manajemen state di SPA. Terapkan best practice keamanan dan caching untuk performa optimal.

---

Tutorial lengkap setup Laravel 11 dengan Vite, Breeze, Sanctum, dan Tanstack Query. Langkah demi langkah, contoh kode, dan best practice modern untuk pengembangan web PHP Framework.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend