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

Tutorial step-by-step ini menjelaskan cara menginstal Laravel 11, mengkonfigurasi Vite, Breeze, Sanctum, serta mengoptimalkan proyek dengan TailwindCSS untuk pengembangan aplikasi web modern.

1. Persyaratan Sistem

Pastikan Anda memiliki:

• PHP >= 8.2
• Composer terbaru
• Node.js >= 18 (npm atau Yarn)
• Database (MySQL, PostgreSQL, atau SQLite)

2. Instalasi Laravel 11

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

Masuk ke folder project:

cd my-app

2.1. Menginisialisasi Git (opsional)

git init && git add . && git commit -m "Initial commit - Laravel 11"

3. Setup Vite dan TailwindCSS

Laravel 11 sudah menyertakan Vite sebagai bundler default. Install dependensi frontend:

npm install

3.1. Instal TailwindCSS

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

Konfigurasi tailwind.config.js:

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

Update resources/css/app.css:

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

Jalankan Vite untuk development:

npm run dev

4. Instalasi Laravel Breeze (Starter Kit)

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

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

Install dependensi frontend yang dibutuhkan oleh Breeze:

npm install && npm run dev

5. Konfigurasi Laravel Sanctum untuk API Authentication

composer require laravel/sanctum

Publish konfigurasi dan migrasi:

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

Aktifkan middleware Sanctum di app/Http/Kernel.php:

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

Contoh route API menggunakan token:

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. Environment & Konfigurasi Dasar

Copy file .env.example menjadi .env dan generate key:

cp .env.example .env
php artisan key:generate

Sesuaikan database pada .env:

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

Lakukan migrasi:

php artisan migrate

7. Best Practice Modern

• Environment Segregation: Gunakan file .env.testing untuk testing otomatis.
• Feature Flags: Manfaatkan package spatie/laravel-feature-flags untuk kontrol fitur.
• Code Quality: Integrasikan PHPStan dan Laravel Pint dalam CI/CD.
• Docker: Buat container resmi Laravel dengan docker-compose.yml untuk konsistensi tim.
• Static Asset Versioning: Vite menambahkan hash otomatis, pastikan mix-manifest.json tidak di‑cache secara berlebihan.

8. Deploy ke Production

1. Build assets: npm run build
2. Set APP_ENV=production dan APP_DEBUG=false di server.
3. Cache konfigurasi & route: php artisan config:cache && php artisan route:cache
4. Optimalkan autoloader: composer install --optimize-autoloader --no-dev
5. Jalankan queue worker (jika diperlukan) dengan supervisor atau systemd.

9. Testing Awal

php artisan test

Pastikan semua fitur authentication dan UI Breeze berfungsi.

Dengan mengikuti langkah‑langkah di atas, Anda akan memiliki proyek Laravel 11 yang modern, cepat, dan siap untuk pengembangan skala besar. Penggunaan Vite, Breeze, Sanctum, dan TailwindCSS memberi fondasi UI yang responsif, sementara best practice seperti Docker, feature flags, dan CI/CD memastikan kode tetap bersih dan dapat dipelihara.

---

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

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend