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

Ikuti tutorial step‑by‑step ini untuk menginstal Laravel 11 terbaru, mengonfigurasi Vite, Breeze, Sanctum, dan Tailwind CSS secara optimal, sehingga proyek Anda siap produksi dengan arsitektur modern.

1. Persiapan Lingkungan

Pastikan sistem Anda memenuhi persyaratan minimal:

• PHP >= 8.2
• Composer 2.x
• Node.js >= 20 (disarankan LTS)
• Database MySQL 8 atau PostgreSQL 15

1.1. Instalasi Composer dan Laravel Installer

composer global require laravel/installer
export PATH="$HOME/.config/composer/vendor/bin:$PATH"

1.2. Instalasi Node dan paket build

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs
npm install -g npm@latest

2. Membuat Proyek Laravel 11 Baru

laravel new blog --jetstream=livewire --stack=blade
# atau gunakan Composer jika tidak memakai installer
composer create-project laravel/laravel blog "11.*"

Folder blog berisi kode dasar Laravel 11.

3. Mengganti Laravel Mix dengan Vite

Laravel 11 sudah menyertakan Vite secara default, namun pastikan konfigurasi berikut:

3.1. Install dependencies

cd blog
npm install
npm install --save-dev vite laravel-vite-plugin

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

3.3. Update package.json scripts

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

4. Menambahkan Tailwind CSS (Best Practice)

4.1. Install Tailwind dan dependensinya

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

4.2. Konfigurasi tailwind.config.js

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

4.3. Tambahkan direktif Tailwind ke resources/css/app.css

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

5. Mengintegrasikan Laravel Breeze (auth sederhana)

5.1. Install Breeze via Composer

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

Breeze menyediakan route, controller, dan view auth dasar dengan Tailwind.

6. Menyiapkan Laravel Sanctum untuk API Token & SPA Auth

6.1. Install Sanctum

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

6.2. Tambahkan Middleware pada app/Http/Kernel.php

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

6.3. Konfigurasi CORS (config/cors.php)

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:5173'], // Vite dev server
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];

6.4. Contoh penggunaan token di controller

use Laravel\Sanctum\HasApiTokens;
use App\Models\User;

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('app-token')->plainTextToken;
    return response()->json(['token' => $token]);
}

public function profile(Request $request)
{
    return $request->user(); // otomatis via sanctum middleware
}

7. Testing Lokal & Build Production

7.1. Jalankan server development

php artisan serve
npm run dev   // Vite hot‑reload

7.2. Build assets untuk production

npm run build
php artisan config:cache
php artisan route:cache
php artisan view:cache

7.3. Deploy ke server Linux

1. Upload seluruh kode, jalankan composer install --optimize-autoloader --no-dev
2. Set permission storage dan bootstrap/cache
3. Jalankan migrasi php artisan migrate --force
4. Gunakan proses manager (Supervisor) untuk queue, dan web server (Nginx) dengan fastcgi PHP-FPM.

8. Best Practice Tambahan

• Environment variables: Simpan kunci rahasia di .env dan jangan commit.
• Logging: Gunakan channel stack dengan daily dan slack untuk error kritis.
• Code style: Terapkan PHP CS Fixer atau Pint (composer require laravel/pint --dev).
• Testing: Buat feature test menggunakan Pest atau PHPUnit untuk auth dan API.
• Security: Aktifkan APP_DEBUG=false di production, gunakan php artisan route:cache, dan set csrf token pada semua form.

Dengan mengikuti langkah‑langkah di atas, Anda akan memiliki proyek Laravel 11 yang terstruktur modern, menggunakan Vite untuk asset bundling, Tailwind untuk UI, Breeze untuk autentikasi cepat, serta Sanctum untuk API token yang aman. Kombinasi ini mencerminkan best practice 2026, mempermudah pengembangan, meningkatkan performa, dan mempersiapkan aplikasi untuk skala produksi.

---

Tutorial lengkap setup Laravel 11 terbaru dengan Vite, Breeze, Sanctum, dan Tailwind. Langkah demi langkah, konfigurasi modern, best practice, dan contoh kode siap pakai.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend