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

Pelajari cara menginstal Laravel 11 terbaru dan mengkonfigurasi ekosistem modernnya secara step‑by‑step, termasuk Vite, Laravel Breeze, Laravel Sanctum, serta Tailwind CSS untuk UI yang responsif.

1. Prasyarat

• PHP 8.2 atau lebih tinggi
• Composer 2.x
• Node.js 20+ dan npm
• Database MySQL/PostgreSQL/SQLite

2. Instalasi Laravel 11

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

Pastikan php -v menampilkan versi 8.2+ dan composer -V menampilkan 2.x.

3. Setup Vite (Asset Bundler bawaan)

1. Instal dependensi frontend:

npm install
npm run dev

Laravel 11 sudah mengkonfigurasi vite.config.js secara default. Untuk produksi gunakan npm run build.

4. Install Laravel Breeze (Starter Kit)

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

Opsional: gunakan blade atau react dengan mengganti argumen pada perintah di atas.

4.1. Migrasi Database

php artisan migrate

5. Konfigurasi Tailwind CSS

Tailwind sudah terpasang lewat Breeze. Pastikan file tailwind.config.js berisi:

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

6. Instal Laravel Sanctum (API Authentication)

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

Tambahkan middleware EnsureFrontendRequestsAreStateful::class pada api guard di config/sanctum.php jika Anda menggunakan SPA.

6.1. Konfigurasi Guard

'guards' => [
    'web' => [
        'driver' => 'session',
        'provider' => 'users',
    ],
    'api' => [
        'driver' => 'sanctum',
        'provider' => 'users',
    ],
],

6.2. Contoh Route API dengan Sanctum

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\API\UserController;

Route::middleware('auth:sanctum')->group(function () {
    Route::get('/user', [UserController::class, 'profile']);
});

7. Best Practice Modern

• Environment Variables: Simpan rahasia di .env dan jangan pernah commit.
• Strict Types: Tambahkan declare(strict_types=1); di file PHP utama.
• Service Container Binding: Gunakan binding di AppServiceProvider untuk dependensi khusus.
• Route Caching pada produksi: php artisan route:cache.
• Config Caching: php artisan config:cache.
• Static Analysis: Jalankan phpstan atau psalm secara berkala.
• Testing: Buat tes unit dan feature dengan php artisan test.

8. Deploy ke Production

1. Setel APP_ENV=production dan APP_DEBUG=false di .env.
2. Jalankan npm run build untuk aset produksi.
3. Cache konfigurasi, route, dan view:

   php artisan config:cache
   php artisan route:cache
   php artisan view:cache

4. Pastikan permission folder storage dan bootstrap/cache dapat ditulis oleh web server.

Setelah langkah-langkah di atas selesai, aplikasi Laravel 11 siap digunakan dengan stack modern yang scalable dan aman.

Dengan mengikuti tutorial ini, Anda mendapatkan proyek Laravel 11 yang terstruktur, menggunakan Vite untuk asset bundling, Breeze untuk scaffolding UI, Sanctum untuk otentikasi API, serta Tailwind CSS untuk styling responsif. Implementasi best practice modern memastikan kode bersih, performa optimal, dan siap produksi.

---

Tutorial step-by-step setup Laravel 11 dengan Vite, Breeze, Sanctum, dan Tailwind CSS. Panduan lengkap mulai dari instalasi, konfigurasi, contoh kode, hingga best practice modern untuk pengembangan web dengan Laravel.

Laravel,PHP Framework,Web Development,Vite,Breeze,Sanctum,Tailwind CSS

#Laravel #LaravelIndonesia #PHP #WebDev #Backend