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

Artikel ini menjelaskan langkah‑demi‑langkah menginstal Laravel 11 terbaru, mengonfigurasi Vite, Breeze, Sanctum, serta menyiapkan Tailwind CSS untuk pengembangan aplikasi web modern dengan Laravel, PHP Framework, dan Web Development.

1. Persiapan Lingkungan

Pastikan server Anda memenuhi persyaratan Laravel 11:

• PHP >= 8.2
• Ekstensi PHP: OpenSSL, PDO, Mbstring, Tokenizer, XML, Ctype, JSON, BCMath
• Composer 2.x
• Node.js >= 20 dengan npm atau Yarn

2. Instalasi Laravel 11

composer create-project laravel/laravel myapp "11.*"

Masuk ke direktori proyek:

cd myapp

3. Mengganti Mix dengan Vite (Sudah bawaan)

Laravel 11 mengintegrasikan Vite secara default. Pastikan file vite.config.js ada di root proyek. Jika tidak, jalankan:

npm install && npm run dev

Perintah di atas meng‑install dependensi npm dan memulai server Vite.

4. Instalasi Laravel Breeze (Frontend & Authentication)

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

Anda bisa pilih blade, react, atau vue. Contoh di atas menggunakan Vue 3. Setelah itu, install assets:

npm install && npm run dev

Jalankan migrasi database:

php artisan migrate

5. Konfigurasi Tailwind CSS (Sudah termasuk Breeze)

Jika belum terinstall, tambahkan:

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

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

6. Instalasi Laravel Sanctum (API Token & SPA Authentication)

composer require laravel/sanctum

Publikasikan konfigurasi dan migrasi:

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

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

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

Di config/sanctum.php, pastikan stateful mencakup domain lokal Anda:

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'localhost,127.0.0.1')),

7. Membuat API Guard dengan Sanctum

Contoh route di routes/api.php:

use App\Http\Controllers\API\UserController;

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

Controller contoh:

namespace App\Http\Controllers\API;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class UserController extends Controller {
    public function profile(Request $request) {
        return response()->json($request->user());
    }
}

8. Best Practice untuk Pengembangan Modern

• Environment Variables: Simpan kunci rahasia di .env dan jangan pernah commit.
• Docker: Gunakan container resmi laravelphp/php-fpm dan node untuk konsistensi lintas tim.
• Testing: Tambahkan pestphp/pest atau phpunit dan tulis tes fitur untuk auth dan API.
• Code Style: Aktifkan Laravel Pint untuk standar kode otomatis.
• Version Control: Buat branch feature/auth-sanctum untuk semua perubahan terkait autentikasi.

9. Menjalankan Proyek

# Backend server
php artisan serve --port=8000

# Frontend Vite dev server
npm run dev

Akses http://localhost:8000 untuk melihat aplikasi Laravel dengan UI Breeze, Tailwind, serta autentikasi berbasis Sanctum.

Dengan mengikuti langkah‑demi‑langkah di atas, Anda telah menyiapkan Laravel 11 yang lengkap dengan Vite, Breeze, Tailwind, dan Sanctum. Konfigurasi ini mencerminkan best practice modern untuk pengembangan aplikasi berbasis PHP Framework Laravel, memudahkan pengembangan frontend SPA serta API yang aman. Selalu perbarui dependensi melalui Composer dan npm, serta terapkan testing dan kode standar untuk menjaga kualitas proyek jangka panjang.

---

Tutorial step-by-step setup Laravel 11 dengan Vite, Breeze, Sanctum, dan Tailwind. Panduan lengkap best practice modern untuk Laravel, PHP Framework, dan Web Development.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend