Panduan Lengkap Setup Laravel 11 dengan Praktik Modern: Vite, Breeze, Sanctum, dan TailwindCSS

Ikuti tutorial step‑by‑step ini untuk menginstal Laravel 11 terbaru dan menerapkan stack modern termasuk Vite, Breeze, Sanctum, serta TailwindCSS—semua dengan best practice terkini di tahun 2026.

1. Persiapan Lingkungan

Pastikan sistem Anda sudah terinstall:

• PHP >= 8.3
• Composer 2.x
• Node.js >= 20 (LTS) dan npm atau Yarn
• Database (MySQL 8, PostgreSQL 16, atau SQLite)

2. Instalasi Laravel 11

composer create-project laravel/laravel my-app "^11.0"

Masuk ke folder project:

cd my-app

3. Konfigurasi Vite (Asset Bundler)

Laravel 11 sudah menyertakan Vite secara default, namun kita akan menyesuaikannya:

1. Instal dependensi frontend:

   npm install

2. Tambahkan TailwindCSS dan autoprefixer:

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

3. Inisialisasi Tailwind:

   npx tailwindcss init -p

4. Ubah tailwind.config.js:

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

5. Update resources/css/app.css:

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

6. Jalankan dev server:

   npm run dev

   Vite akan melayani asset pada http://localhost:5173.

4. Instalasi Laravel Breeze (Starter Kit)

Breeze menyediakan otentikasi ringan dengan Blade atau Inertia. Kita gunakan Blade + Tailwind:

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

Setelah instalasi, jalankan migrasi:

php artisan migrate

Build ulang aset:

npm run dev

5. Konfigurasi Laravel Sanctum (API Token & SPA Authentication)

1. Instal package:

   composer require laravel/sanctum

2. Publish konfigurasi dan migration:

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

3. 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],

4. Set konfigurasi CORS di config/cors.php agar origin front‑end (http://localhost:5173) diizinkan.
5. Gunakan token personal atau SPA guard di controller. Contoh endpoint login API:

   use Illuminate\Http\Request;
   use App\Models\User;
   
   public function login(Request $request) {
       $data = $request->validate([
           'email' => 'required|email',
           'password' => 'required',
           'device_name' => 'required'
       ]);
       if (!Auth::attempt($request->only('email','password'))){
           return response()->json(['message'=>'Invalid credentials'],401);
       }
       $user = User::where('email',$request->email)->first();
       return $user->createToken($request->device_name)->plainTextToken;
   }
   

6. Struktur Direktori & Best Practice

• Routes: Pisahkan web (routes/web.php) dan API (routes/api.php) dengan prefiks api dan gunakan controller resource.
• Controllers: Gunakan php artisan make:controller --invokable untuk single‑action, dan Form Request untuk validasi.
• Service Layer: Letakkan logika bisnis di app/Services agar controller tetap tipis.
• Repositories: Implementasi pattern repository di app/Repositories bila aplikasi membutuhkan abstraksi data.
• Testing: Laravel 11 menyediakan PHPUnit 11 & Pest. Buat tes unit di tests/Unit dan feature di tests/Feature.
• Environment: Simpan variabel sensitif di .env dan gunakan config:cache di produksi.

7. Deploy ke Production

1. Build aset:

   npm run build

2. Optimasi Laravel:

   php artisan optimize:cache
   php artisan route:cache
   php artisan view:cache

3. Set permissions pada storage & bootstrap/cache.
4. Gunakan queue worker (Laravel Horizon atau Supervisor) untuk job background.

8. Debug & Monitoring

Pasang Laravel Telescope untuk development dan Laravel Octane jika butuh performa tinggi.

Dengan mengikuti langkah‑langkah di atas, Anda memiliki aplikasi Laravel 11 yang modern, terstruktur, dan siap skala. Vite memastikan asset dibundel secara efisien, Breeze mempercepat scaffolding otentikasi, dan Sanctum memberikan solusi aman untuk SPA maupun API token. Terapkan best practice folder, service layer, dan testing untuk menjaga kualitas kode seiring pertumbuhan proyek.

---

Tutorial lengkap setup Laravel 11 di 2026 dengan Vite, Breeze, Sanctum, TailwindCSS, serta best practice modern untuk pengembangan web yang cepat dan aman.

Laravel,PHP Framework,Web Development

#Laravel #LaravelIndonesia #PHP #WebDev #Backend