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

Ikuti tutorial step‑by‑step ini untuk menginstal Laravel 11 terbaru, mengkonfigurasi Vite, menambahkan starter kit Breeze, mengamankan API dengan Sanctum, serta mengoptimalkan UI menggunakan TailwindCSS.

1. Prasyarat

• PHP >= 8.2, Composer, Node.js >= 20, dan npm atau yarn.
• Database MySQL/PostgreSQL atau SQLite untuk development.
• Git (opsional) untuk version control.

2. Instalasi Laravel 11

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

Perintah di atas mengunduh Laravel 11 dengan semua dependensi stabil.

3. Setup Frontend dengan Vite

Laravel 11 sudah menyertakan Vite secara default, namun pastikan file konfigurasi ada:

# Pastikan paket npm terinstal
npm install
# Jalankan dev server Vite
npm run dev

Jika ingin mengubah port atau host, edit vite.config.js sesuai kebutuhan.

4. Instalasi Laravel Breeze (Starter Kit)

composer require laravel/breeze --dev
php artisan breeze:install vue
# atau untuk Blade & Tailwind
# php artisan breeze:install blade
npm install && npm run dev

Breeze menyediakan autentikasi dasar, registrasi, reset password, dan UI berbasis TailwindCSS.

5. Konfigurasi Sanctum untuk API Token

1. Instal paket Sanctum

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

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

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

5.1. Membuat Token

// App/Http/Controllers/AuthController.php
public function login(Request $request)
{
    $request->validate([
        'email' => 'required|email',
        'password' => 'required',
    ]);
    if (!Auth::attempt($request->only('email', 'password'))) {
        return response()->json(['message' => 'Unauthenticated'], 401);
    }
    $user = $request->user();
    $token = $user->createToken('api-token')->plainTextToken;
    return response()->json(['token' => $token]);
}

5.2. Menggunakan Middleware auth:sanctum

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

6. Integrasi TailwindCSS (jika belum)

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

Ubah 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;

7. Pengaturan Environment

• Copy .env.example ke .env dan set APP_KEY:

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

Konfigurasi database:

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

8. Menjalankan Aplikasi

php artisan serve
# Buka browser http://127.0.0.1:8000

9. Best Practice Modern

• Envoyer / Laravel Forge: gunakan deployment otomatis dengan environment variables yang dienkripsi.
• Cache Config & Routes: jalankan php artisan config:cache dan php artisan route:cache pada produksi.
• Queue & Jobs: gunakan Laravel Horizon untuk mengawasi queue Redis.
• Testing: tulis Feature Test dengan Pest atau PHPUnit untuk endpoint Sanctum.
• Static Analysis: integrasikan PHPStan atau Psalm via Composer script.

Dengan mengikuti langkah‑langkah di atas, Anda kini memiliki proyek Laravel 11 yang modern, cepat berkat Vite, aman dengan Sanctum, dan siap dikembangkan lebih lanjut menggunakan ekosistem Laravel yang terus berkembang. Terapkan best practice seperti caching, queue monitoring, dan static analysis untuk menjaga kualitas kode pada skala produksi.

---

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

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend