Setup Laravel 11 dengan Best Practice Modern: Vite, Breeze, Sanctum, dan Tailwind CSS

Panduan lengkap langkah demi langkah untuk menginstal Laravel 11 terbaru serta mengintegrasikan Vite, Breeze, Sanctum, dan Tailwind CSS dengan konfigurasi terbaik pada tahun 2026.

1. Persiapan Lingkungan

Instalasi Prasyarat

Pastikan sistem Anda memiliki:

• PHP 8.3 atau lebih baru
• Composer 2.x
• Node.js 20.x dan npm 10.x
• Database MySQL 8.0 atau PostgreSQL 15

Verifikasi versi dengan php -v, composer -V, dan node -v.

2. Membuat Proyek Laravel 11

Instalasi Laravel via Composer

Jalankan perintah berikut di terminal:

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

Masuk ke direktori proyek:

cd laravel-modern

3. Mengonfigurasi Vite

Instalasi Dependensi Frontend

Laravel 11 sudah menyertakan preset Vite. Install paket NPM:

npm install

Jika Anda ingin menambahkan TypeScript atau Vue 3, gunakan:

npm install -D typescript vue@next @vitejs/plugin-vue

Konfigurasi vite.config.js

Ubah file vite.config.js agar mendukung Vue (opsional):

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

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

4. Menambahkan Laravel Breeze (Starter Kit)

Instalasi Breeze dengan Blade atau Inertia

Untuk Blade (default):

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

Untuk Inertia Vue (jika menggunakan Vue):

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

Setelah itu, jalankan migrasi dan compile assets:

php artisan migrate
npm run dev

5. Mengamankan API dengan Laravel Sanctum

Instalasi Sanctum

composer require laravel/sanctum

Publish Config & Migrate

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

Konfigurasi Middleware

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

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

Penggunaan Token Personal Access

Contoh pada controller:

use Laravel\Sanctum\HasApiTokens;

public function login(Request $request)
{
    $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('api-token')->plainTextToken;
    return response()->json(['token' => $token]);
}

6. Mengintegrasikan Tailwind CSS

Instalasi Tailwind

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

Konfigurasi tailwind.config.js

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

Import di resources/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Jalankan kembali kompilasi:

npm run dev

7. Best Practice Modern

• Gunakan .env.example untuk menyimpan contoh konfigurasi dan tidak pernah commit .env asli.
• Cache konfigurasi di production: php artisan config:cache dan php artisan route:cache.
• Optimalkan autoload dengan composer install --optimize-autoloader --no-dev.
• Gunakan Laravel Octane (Swoole atau RoadRunner) untuk performa tinggi pada deployment.
• Static Analysis: Integrasikan PHPStan atau Psalm dalam CI.
• Linting Frontend: Tambahkan ESLint dan Stylelint ke pipeline CI.

8. Deploy ke Production

Langkah Utama

1. Set environment variables di server.
2. Jalankan composer install --no-dev --optimize-autoloader.
3. Compile assets: npm ci && npm run build.
4. Migrasi database: php artisan migrate --force.
5. Cache konfigurasi & routes.
6. Jika menggunakan Octane: php artisan octane:start --server=swoole --workers=8.

Dengan mengikuti langkah‑step ini, Anda mendapatkan instalasi Laravel 11 yang modern, cepat, dan aman. Kombinasi Vite, Breeze, Sanctum, dan Tailwind CSS memberikan fondasi solid untuk aplikasi web skala kecil hingga enterprise di 2026.

---

Panduan lengkap setup Laravel 11 dengan Vite, Breeze, Sanctum, dan Tailwind CSS. Langkah demi langkah, best practice, dan contoh kode terbaru untuk pengembangan web modern.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend