Panduan Lengkap Setup Laravel 11 dengan Best Practice Modern: Vite, Breeze, Sanctum, dan TailwindCSS

Ikuti tutorial step‑by‑step ini untuk menginstal Laravel 11 terbaru dan mengonfigurasi stack modern menggunakan Vite, Breeze, Sanctum, serta TailwindCSS, sehingga proyek Anda siap produksi dengan arsitektur yang bersih dan aman.

1. Persiapan Lingkungan

1.1. Prasyarat

• PHP >= 8.3
• Composer 2.x
• Node.js >= 20 (npm atau yarn)
• Database (MySQL 8+, PostgreSQL, atau SQLite)
• Git

1.2. Buat Project Baru

composer create-project laravel/laravel blog --prefer-dist
cd blog

Perintah di atas mengunduh Laravel 11 (versi stabil pada 2026) ke folder blog.

2. Instalasi Vite (Frontend Bundler)

2.1. Hapus Laravel Mix (jika ada)

rm -rf resources/js resources/css

2.2. Install Vite dan plugin resmi Laravel

npm install --save-dev vite laravel-vite-plugin
npm install --save-dev @vitejs/plugin-react # optional for React
npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

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

2.4. Tambahkan script npm

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

3. Setup TailwindCSS

3.1. Edit tailwind.config.js

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

3.2. Buat resources/css/app.css

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

4. Instalasi Laravel Breeze (Auth scaffolding)

4.1. Install package

composer require laravel/breeze --dev
php artisan breeze:install vue --pest
# atau gunakan --react, --blade, --inertia sesuai kebutuhan

4.2. Install dependensi frontend

npm install
npm run dev

4.3. Migrasi database

php artisan migrate

5. Integrasi Laravel Sanctum (API Authentication)

5.1. Install Sanctum

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

5.2. Aktifkan middleware di app/Http/Kernel.php

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

Tambahkan ke grup api atau web sesuai skenario.

5.3. Buat API Token contoh

// routes/api.php
use App\Models\User;
use Illuminate\Http\Request;

Route::post('/login', function (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]);
});

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

6. Best Practice Modern

• Environment Variables: Simpan semua credential di .env dan gunakan config:cache untuk produksi.
• Database Configuration: Gunakan DB_CONNECTION=mysql dengan strict=true dan timezone=+00:00 untuk konsistensi.
• Code Quality: Jalankan php artisan lint (Laravel Pint) dan npm run lint (ESLint) secara otomatis dengan Git hooks.
• Testing: Tulis Feature Test menggunakan PestPHP; contoh:
  

  uses(Tests\Feature\ExampleTest::class);
  
  test('user can register', function () {
      $response = $this->postJson('/register', [
          'name' => 'John',
          'email' => '[email protected]',
          'password' => 'secret',
          'password_confirmation' => 'secret',
      ]);
      $response->assertCreated();
  });
  

• Deployment: Build assets (npm run build), cache konfigurasi (php artisan config:cache), route (php artisan route:cache), dan optimize (php artisan optimize).
• Security: Aktifkan APP_DEBUG=false, gunakan HTTPS, set SESSION_SECURE_COOKIE=true, dan rotasi secret key secara berkala.

7. Verifikasi Instalasi

# Jalankan server development
php artisan serve
# Buka browser: http://localhost:8000
# Pastikan tampilan login Breeze muncul dan CSS Tailwind ter‑render.

# Test API token
curl -X POST http://localhost:8000/api/login -H "Content-Type: application/json" -d '{"email":"[email protected]","password":"secret"}'

Jika semua langkah berhasil, proyek Laravel 11 Anda siap untuk pengembangan lebih lanjut dengan arsitektur modern.

Dengan mengikuti tutorial ini, Anda telah menyiapkan Laravel 11 lengkap dengan Vite, TailwindCSS, Breeze, dan Sanctum—kombinasi stack yang menjadi standar best practice untuk aplikasi web modern di tahun 2026. Praktik keamanan, testing, dan optimasi yang diterapkan memastikan kode Anda siap produksi dan mudah dipelihara.

---

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

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend