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

Tutorial step‑by‑step ini menjelaskan cara menginstal Laravel 11 terbaru serta mengintegrasikan tool modern seperti Vite, Breeze, Laravel Sanctum, dan TailwindCSS untuk proyek PHP Framework yang aman dan cepat.

1. Prasyarat Sistem

Pastikan environment Anda memenuhi persyaratan berikut:

• PHP >= 8.2
• Composer 2.x
• Node.js >= 20 dengan npm atau Yarn
• Database (MySQL 8+, Postgres, atau SQLite)

2. Instalasi Laravel 11

composer create-project laravel/laravel:^11.0 my-project
cd my-project

Perintah di atas meng‑download Laravel 11 stabil ke folder my-project dan masuk ke direktori proyek.

3. Konfigurasi Vite

Laravel 11 sudah menyertakan Vite secara default. Pastikan file vite.config.js ada di root proyek. Jika tidak, jalankan:

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

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

Menjalankan Vite

npm run dev   // untuk development
npm run build // untuk production

4. Install Laravel Breeze (Starter Kit)

Breeze menyediakan scaffolding autentikasi ringan dengan Blade atau Vue/React. Pada contoh ini gunakan Blade + Tailwind.

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

Setelah migration, Anda sudah memiliki route login, register, dan dashboard.

5. Integrasi TailwindCSS

Jika belum terinstal, jalankan:

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

Ubah tailwind.config.js:

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

Dan di resources/css/app.css tambahkan:

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

6. Setup Laravel Sanctum untuk API Authentication

1. Instal paket Sanctum

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

Jika Anda menggunakan SPA (misalnya Vue) aktifkan middleware EnsureFrontendRequestsAreStateful di app/Http/Kernel.php pada grup api:

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

Contoh Endpoint Login API

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
use Laravel\Sanctum\HasApiTokens;

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

Gunakan token ini di header Authorization: Bearer {token} untuk mengakses route yang dilindungi auth:sanctum.

7. Best Practice Modern

• Environment Variables: Simpan rahasia (APP_KEY, DB_PASSWORD, SANCTUM_STATEFUL_DOMAINS) di .env dan jangan commit.
• Cache Config & Routes: Pada produksi jalankan php artisan config:cache dan php artisan route:cache.
• Database Migrations: Selalu gunakan php artisan migrate --force saat deploy CI/CD.
• Code Quality: Integrasikan PHPStan atau Psalm, serta Laravel Pint untuk standar coding.
• Testing: Tulis Feature Test untuk autentikasi Sanctum dan UI test untuk Breeze menggunakan Pest atau PHPUnit.

8. Deploy ke Production (Contoh Laravel Forge)

1. Push repository ke GitHub.
2. Buat site baru di Laravel Forge, pilih PHP 8.2, dan hubungkan repo.
3. Set environment variables di Forge, jalankan composer install --optimize-autoloader --no-dev.
4. Jalankan npm ci && npm run build pada server.
5. Eksekusi php artisan migrate --force dan php artisan config:cache.

Setelah itu, situs siap diakses dengan performa Vite + Tailwind yang ter‑optimasi.

Dengan mengikuti langkah‑langkah di atas, Anda memiliki proyek Laravel 11 yang terstruktur, aman, dan siap dikembangkan dengan teknologi front‑end modern. Kombinasi Vite, Breeze, TailwindCSS, dan Sanctum memberikan workflow developer yang cepat serta keamanan API yang handal, menjadikan foundation ideal untuk aplikasi web skala kecil hingga enterprise.

---

Panduan step-by-step setup Laravel 11 dengan Vite, Breeze, Sanctum, dan TailwindCSS. Ikuti tutorial terbaru 2026 untuk proyek Laravel modern yang aman dan optimal.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend