Tutorial Lengkap Setup Laravel 11 dengan Best Practice Modern (Vite, Breeze, Sanctum, dan Tailwind)

Panduan step‑by‑step untuk menginstal Laravel 11 terbaru, mengonfigurasi Vite, menambahkan Breeze, mengamankan API dengan Sanctum, serta mengoptimalkan front‑end menggunakan Tailwind CSS.

1. Prasyarat

• PHP >= 8.3
• Composer 2.x
• Node.js >= 20 & npm
• Database MySQL/PostgreSQL

2. Instalasi Laravel 11

composer create-project laravel/laravel contoh-app "11.*"

Masuk ke folder proyek:

cd contoh-app

2.1. Inisialisasi Git (opsional)

git init && git add . && git commit -m "Initial commit - Laravel 11"

3. Konfigurasi Vite

Laravel 11 sudah menyertakan Vite sebagai bundler default. Pastikan vite.config.js berisi:

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,
        }),
    ],
});

Instal dependensi front‑end:

npm install && npm run dev

4. Menambahkan Laravel Breeze (Starter Kit)

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

Breeze menyediakan scaffold autentikasi berbasis Vue 3 + Vite. Jika ingin React, gunakan --react.

4.1. Migrasi Database

php artisan migrate

5. Mengamankan API dengan Laravel Sanctum

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:

\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,

Contoh route API yang dilindungi:

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

5.1. Front‑end: Menggunakan token

import axios from 'axios';
axios.defaults.withCredentials = true;
axios.get('/sanctum/csrf-cookie').then(() => {
    axios.post('/login', {email, password}).then(response => {
        // token otomatis tersimpan cookie
    });
});

6. Integrasi Tailwind CSS

Tailwind sudah terpasang via Breeze, tapi pastikan konfigurasi tailwind.config.js mencakup semua file Blade/Vue:

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

7. Best Practice Modern

• Environment variables: gunakan .env.example untuk semua kunci API, jangan hard‑code.
• Cache config & route: jalankan php artisan config:cache dan php artisan route:cache pada production.
• Optimasi autoload: composer install --optimize-autoloader --no-dev.
• Queue & Jobs: aktifkan queue driver (Redis) untuk email dan pekerjaan latar belakang.
• Testing: gunakan Pest atau PHPUnit, contoh: php artisan test.
• Static analysis: tambahkan phpstan atau psalm untuk kode yang lebih aman.

8. Deploy ke Production (contoh di Laravel Forge)

1. Push repository ke GitHub.
2. Hubungkan repo di Forge, pilih PHP 8.3 & Nginx.
3. Set environment variables di .env pada server.
4. Jalankan deployment script:

cd /home/forge/contoh-app
composer install --no-dev --optimize-autoloader
npm ci && npm run build
php artisan migrate --force
php artisan config:cache
php artisan route:cache
php artisan view:cache

Setelah itu, aplikasi siap diakses dengan performa optimal.

Dengan mengikuti langkah‑langkah di atas, Anda akan memiliki proyek Laravel 11 yang modern, cepat, dan aman. Vite menyediakan build front‑end yang ringan, Breeze mempercepat scaffolding autentikasi, Sanctum melindungi API, dan Tailwind memastikan UI responsif. Terapkan best practice seperti caching, queue, dan static analysis untuk menjaga kualitas kode di lingkungan produksi.

---

Panduan step‑by‑step setup Laravel 11 dengan Vite, Breeze, Sanctum, Tailwind, serta best practice modern untuk pengembangan web PHP Framework terdepan di 2026.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend