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

Panduan lengkap step-by-step untuk menginstal Laravel 11 terbaru, mengkonfigurasi Vite, Breeze, Sanctum, serta menerapkan Tailwind CSS secara optimal di tahun 2026.

1. Prasyarat

Software yang dibutuhkan

• PHP >= 8.3
• Composer 2.7+
• Node.js 20.x LTS
• Git

Database

• MySQL 8.0 atau PostgreSQL 16

2. Instalasi Laravel 11

2.1 Buat project baru

composer create-project laravel/laravel:^11.0 myapp

Perintah ini mengunduh Laravel 11 stabil, menginisialisasi struktur folder, dan menginstall dependensi default.

2.2 Masuk ke folder project

cd myapp

3. Konfigurasi Vite (Asset Bundler Modern)

3.1 Install dependensi front‑end

npm install

Laravel 11 sudah menyertakan vite.config.js standar.

3.2 Tambahkan Tailwind CSS

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init -p

Edit tailwind.config.js:

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

Tambahkan direktif Tailwind ke resources/css/app.css:

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

3.3 Build dan watch

npm run dev   // untuk development dengan hot‑reloading
npm run build // untuk produksi

4. Instalasi Laravel Breeze (Starter Kit)

4.1 Instalasi paket

composer require laravel/breeze --dev

4.2 Generate scaffold dengan Inertia + Vue 3 (pilihan modern)

php artisan breeze:install vue

Jika ingin Blade, gunakan php artisan breeze:install blade. Pada contoh ini kami pakai Vue 3.

4.3 Compile assets

npm install && npm run dev

5. Setup Laravel Sanctum (API Authentication)

5.1 Instalasi paket

composer require laravel/sanctum

5.2 Publish konfigurasi & migrasi

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

5.3 Tambahkan middleware ke api guard

Di app/Http/Kernel.php pastikan:

\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,

di dalam grup api (default Laravel 11 sudah menambahkannya).

5.4 Contoh penggunaan token

// routes/api.php
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. Best Practice Modern

6.1 Struktur folder

• Gunakan app/Models untuk entitas Eloquent.
• Pindahkan service class ke app/Services.
• Gunakan app/Actions untuk command‑style business logic.

6.2 Environment & Config

• Simpan rahasia di .env dan gunakan config:cache pada deployment.
• Gunakan APP_DEBUG=false di produksi.

6.3 Testing

• Gunakan PHPUnit 11 + Pest untuk testing yang expressive.
• Contoh test auth API:

/** @test */
public function it_can_authenticate_via_sanctum()
{
    $user = User::factory()->create(['password' => bcrypt('secret')]);
    $response = $this->postJson('/api/login', ['email' => $user->email, 'password' => 'secret']);
    $response->assertOk()->assertJsonStructure(['token']);
}

6.4 Deployment

• Gunakan php artisan config:cache, php artisan route:cache, php artisan view:cache.
• Jalankan npm run build --production untuk aset statis.
• Setel APP_URL dan SESSION_SECURE_COOKIE=true di server HTTPS.

Dengan mengikuti langkah‑langkah di atas, Anda akan memiliki aplikasi Laravel 11 yang modern, ringan, dan siap produksi. Kombinasi Vite, Breeze (Vue), Sanctum, dan Tailwind CSS memberikan fondasi yang scalable, sambil tetap memanfaatkan best practice terbaru pada ekosistem Laravel 2026.

---

Panduan lengkap setup Laravel 11 dengan Vite, Breeze, Sanctum, dan Tailwind CSS. Tutorial step-by-step 2026 untuk developer PHP Framework modern.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend