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

Panduan step‑by‑step menginstal Laravel 11 terbaru dan mengkonfigurasi stack modern termasuk Vite, Breeze, Sanctum, serta TailwindCSS untuk pengembangan aplikasi web yang cepat dan aman.

1. Prasyarat

• PHP >= 8.2
• Composer terbaru
• Node.js >= 20 & npm
• Database MySQL/PostgreSQL

2. Instalasi Laravel 11

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

Masuk ke folder proyek:

cd my-app

3. Setup Front‑End dengan Vite & TailwindCSS

Laravel 11 sudah menyertakan Vite. Install dependensi front‑end:

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

Configure 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 dev server:

npm run dev

4. Instalasi Laravel Breeze (starter kit)

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

Perintah di atas men‑setup autentikasi berbasis Vue 3 + Vite. Jika ingin React, gunakan react.

npm install && npm run dev

5. Menambahkan Laravel Sanctum untuk API Token

composer require laravel/sanctum

Publikasi konfigurasi & migrasi:

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

Tambahkan middleware EnsureFrontendRequestsAreStateful::class ke grup api di app/Http/Kernel.php:

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

Gunakan trait HasApiTokens pada model User:

use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, HasFactory, Notifiable;
}

Contoh endpoint login API

Route::post('/api/login', function (Request $request) {
    $request->validate([
        'email' => 'required|email',
        'password' => 'required',
    ]);

    if (! Auth::attempt($request->only('email', 'password'))){
        return response()->json(['message' => 'Invalid credentials'], 401);
    }

    $token = $request->user()->createToken('api-token')->plainTextToken;
    return response()->json(['token' => $token]);
});

6. Konfigurasi Environment

Pastikan variabel berikut ada di .env:

APP_NAME="Laravel"
APP_ENV=local
APP_KEY=base64:YOUR_APP_KEY
APP_DEBUG=true
APP_URL=http://localhost

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

SANCTUM_STATEFUL_DOMAINS=localhost,127.0.0.1
SESSION_DOMAIN=localhost
COOKIE_DOMAIN=localhost

7. Menjalankan Aplikasi

php artisan serve
# di terminal terpisah
npm run dev

Akses http://localhost:8000 untuk melihat UI Breeze, dan gunakan /api/* untuk endpoint Sanctum.

8. Best Practice Modern

• Version Control: Commit composer.lock dan package-lock.json untuk reproducible builds.
• Environment Segregation: Simpan rahasia di .env dan gunakan .env.example untuk tim.
• Static Analysis: Tambahkan phpstan atau psalm ke pipeline CI.
• Testing: Buat feature test untuk autentikasi API dengan Sanctum.

  php artisan test --filter=LoginTest

• Cache & Queue: Konfigurasikan Redis sebagai driver cache dan queue di .env untuk produksi.

Dengan mengikuti langkah‑langkah di atas, Anda memiliki proyek Laravel 11 yang siap pakai, menggunakan stack modern Vite, TailwindCSS, Breeze, dan Sanctum. Kombinasi ini memberi performa front‑end cepat, autentikasi yang aman, serta fondasi yang mudah di‑scale untuk aplikasi web masa depan.

---

Panduan lengkap setup Laravel 11 dengan Vite, Breeze, Sanctum, dan TailwindCSS. Langkah instalasi, konfigurasi, contoh kode, dan best practice modern untuk pengembangan PHP Framework terkini.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend