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

Panduan lengkap langkah demi langkah untuk menginstal Laravel 11 terbaru dan mengkonfigurasi stack modern termasuk Vite, Breeze, Sanctum, serta Tailwind CSS, sehingga Anda dapat memulai proyek dengan arsitektur yang aman, cepat, dan siap produksi.

1. Prerequisite

• PHP >= 8.2
• Composer 2.x
• Node.js >= 20 (LTS)
• Database (MySQL, PostgreSQL, atau SQLite)

2. Instalasi Laravel 11

composer create-project laravel/laravel my-app "11.*"

Masuk ke folder proyek:

cd my-app

3. Menggunakan Vite (frontend bundler bawaan)

Laravel 11 sudah terintegrasi dengan Vite, cukup install dependensi Node:

npm install

Jalankan dev server:

npm run dev

Pastikan vite.config.js berisi:

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

4. Instalasi Laravel Breeze (starter kit authentication)

Breeze menyediakan scaffolding minimal dengan Tailwind CSS dan Laravel Sanctum untuk API token:

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

Jika ingin versi Vue atau React, gunakan php artisan breeze:install vue atau react.

5. Menambahkan Laravel Sanctum (API authentication)

composer require laravel/sanctum

Publish konfigurasi dan migrasi:

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

Tambahkan middleware ke api guard di app/Http/Kernel.php:

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

Contoh route API yang dilindungi:

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

6. Mengkonfigurasi Tailwind CSS (styling utilities)

Laravel Breeze sudah menyertakan Tailwind, namun pastikan file tailwind.config.js meng‑scan semua blade/Vue/React files:

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

7. Setup Environment & Database

Ubah .env:

APP_NAME="MyLaravelApp"
APP_ENV=local
APP_KEY=base64:GENERATE_WITH_php artisan key:generate
APP_DEBUG=true
APP_URL=http://localhost

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel11
DB_USERNAME=root
DB_PASSWORD=

Jalankan migrasi:

php artisan migrate

8. Best Practice Modern

• Environment segregation: gunakan .env.testing untuk CI, jangan commit .env.
• Static analysis: install phpstan atau psalm untuk kualitas kode.
• Code style: jalankan ./vendor/bin/pint (Laravel Pint) sebelum commit.
• Cache config & routes: pada production jalankan php artisan config:cache dan php artisan route:cache.
• HTTPS & CSP: aktifkan AppHttpMiddlewareSecureHeaders (paket spatie/laravel-csp) untuk keamanan.
• Docker support: gunakan image resmi php:8.2-fpm dan node:20-alpine untuk environment reproducible.

9. Menjalankan di Production

# Build assets
npm run build

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

# Set proper permissions
chown -R www-data:www-data storage bootstrap/cache

Deploy ke server (Laravel Forge, Vapor, atau VPS) dengan memastikan queue worker dan scheduler berjalan.

Dengan mengikuti langkah‑step ini Anda memiliki foundation Laravel 11 yang modern, aman, dan siap skala. Vite mempercepat bundling asset, Breeze memberikan UI cepat dengan Tailwind, dan Sanctum melindungi API. Terapkan best practice seperti caching, static analysis, dan Docker untuk memastikan proyek tetap maintainable dalam jangka panjang.

---

Tutorial lengkap setup Laravel 11 dengan Vite, Breeze, Sanctum, dan Tailwind CSS. Ikuti langkah‑step modern, konfigurasi, contoh kode, dan best practice untuk proyek PHP Framework terbaru.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend