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, mengonfigurasi Vite, Breeze, Sanctum, serta mengoptimalkan proyek dengan TailwindCSS untuk pengembangan aplikasi web modern.

1. Persiapan Lingkungan

Pastikan Anda sudah menginstal PHP 8.3+, Composer, Node.js 20+, dan Git pada sistem Anda.

1.1. Install Composer

curl -sS https://getcomposer.org/installer | php && sudo mv composer.phar /usr/local/bin/composer

1.2. Install Node.js & npm

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

2. Membuat Proyek Laravel 11 Baru

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

Masuk ke direktori proyek:

cd laravel11-app

3. Mengatur Vite (Asset Bundler Modern)

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

3.1. Install Dependensi Frontend

npm install

3.2. Sesuaikan 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. Jalankan Dev Server

npm run dev

Setelah itu, buka http://localhost:5173 untuk melihat hot‑reload berfungsi.

4. Menambahkan Laravel Breeze (Starter Kit)

4.1. Install Package

composer require laravel/breeze --dev

4.2. Scaffold Auth dengan Blade & Tailwind

php artisan breeze:install blade

Jika ingin menggunakan Vue atau React, ganti blade dengan vue atau react.

4.3. Build Assets

npm install && npm run dev

5. Mengonfigurasi Laravel Sanctum (API Authentication)

5.1. Install Sanctum

composer require laravel/sanctum

5.2. Publikasi Config & Migration

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

5.3. Tambahkan Middleware

Di app/Http/Kernel.php, tambahkan pada grup api:

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

5.4. Membuat Route API Contoh

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

5.5. Login via API

POST /login
Content-Type: application/json

{ "email": "[email protected]", "password": "secret" }

Respons akan mengembalikan token yang dapat disimpan di front‑end dan dipakai pada header Authorization: Bearer {token}.

6. Mengoptimalkan dengan TailwindCSS

6.1. Install Tailwind

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

6.2. Konfigurasi tailwind.config.js

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

6.3. Tambahkan Direktif di resources/css/app.css

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

7. Best Practice Modern

• Environment Variables: Simpan rahasia di .env dan gunakan config:cache untuk produksi.
• Route Caching: php artisan route:cache untuk mempercepat request.
• Laravel Pint: Linting kode otomatis dengan composer require laravel/pint --dev dan jalankan ./vendor/bin/pint.
• Testing: Buat tes fitur dengan php artisan test; gunakan LaravelSanctumSanctum::actingAs() untuk autentikasi dalam test.
• Docker: Untuk konsistensi lingkungan, gunakan image resmi laravelphp/php-fpm dan node:20-alpine dalam docker-compose.yml.

8. Deployment Ringkas

# Build assets untuk produksi
npm run build

# Optimasi Laravel
php artisan config:cache
php artisan route:cache
php artisan view:cache

# Migrate database
php artisan migrate --force

Setelah itu, unggah seluruh folder ke server yang telah terinstall PHP 8.3, Composer, dan database yang sesuai.

Dengan mengikuti langkah‑langkah di atas, Anda kini memiliki proyek Laravel 11 yang modern, aman, dan siap skala. Kombinasi Vite, Breeze, Sanctum, dan TailwindCSS memberikan pengalaman pengembangan cepat serta fondasi yang kuat untuk API dan aplikasi full‑stack. Terapkan best practice seperti caching, linting, dan testing untuk menjaga kualitas codebase dalam jangka panjang.

---

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

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend