Panduan Setup Awal Laravel Breeze untuk Pemula

Belajar setup awal Laravel Breeze dengan langkah praktis, contoh kode, dan best practice untuk pemula hingga menengah.

Mengapa Laravel Breeze?

Ketika baru mulai membangun aplikasi dengan Laravel, salah satu kebutuhan paling umum adalah sistem autentikasi. Login, register, lupa password, hingga verifikasi email adalah fitur dasar yang hampir selalu ada di aplikasi modern.

Laravel sebenarnya sudah lama menyediakan solusi bawaan untuk autentikasi, namun sering kali terlalu kompleks untuk pemula. Di sinilah Laravel Breeze hadir: sebuah starter kit minimalis, simpel, dan mudah dipahami.

Dengan Breeze, kita bisa langsung memiliki:

• Sistem login dan register yang siap pakai.

• Reset password dan email verification.

• Tampilan sederhana dengan Tailwind CSS.

• Pilihan frontend: Blade, atau Inertia (React/Vue).

Singkatnya, Breeze adalah jalan pintas terbaik untuk mulai membangun aplikasi Laravel yang siap autentikasi tanpa harus membangun dari nol.

Persiapan Awal

Sebelum menginstal Laravel Breeze, pastikan semua kebutuhan dasar sudah siap.

1. Software Wajib Terinstal

• PHP >= 8.1 → Laravel terbaru butuh versi PHP modern.

• Composer → dependency manager PHP.

• Node.js & NPM (atau Yarn) → untuk mengelola dependensi frontend.

• Database → MySQL atau PostgreSQL.

• Laravel Installer (opsional) → mempermudah membuat project baru.

Cek versi PHP dan Composer dengan:

php -v
composer -v

Jika semua sudah sesuai, kita siap membuat proyek baru.

Membuat Proyek Laravel Baru

Ada dua cara umum: dengan Composer langsung, atau dengan Laravel Installer.

Cara 1: Composer

composer create-project laravel/laravel my-app
cd my-app

Cara 2: Laravel Installer

laravel new my-app
cd my-app

Setelah masuk ke folder proyek, coba jalankan server bawaan Laravel:

php artisan serve

Lalu akses di browser:
http://localhost:8000

Jika halaman Laravel default muncul, berarti setup dasar berhasil. 🎉

Instalasi Laravel Breeze

Langkah berikutnya adalah menambahkan Breeze ke dalam proyek.

1. Tambahkan Breeze via Composer

composer require laravel/breeze --dev

Kenapa --dev? Karena Breeze lebih dianggap sebagai starter kit yang digunakan saat pengembangan.

2. Jalankan Instalasi Breeze

php artisan breeze:install

Secara default, perintah ini akan menginstal versi Blade.

Kalau mau langsung pakai Inertia + React:

php artisan breeze:install react

Atau dengan Vue:

php artisan breeze:install vue

Tips:
Kalau masih pemula, coba dulu Blade. Kalau sudah terbiasa dengan frontend modern, silakan langsung ke React/Vue.

Setup Frontend Dependencies

Setelah instalasi selesai, kita perlu menginstal dependensi frontend.

npm install && npm run dev
# atau
yarn && yarn dev

Perintah npm run dev akan menjalankan Vite, sehingga file CSS dan JS bisa dikompilasi.

Konfigurasi Database

Laravel butuh database agar autentikasi berjalan (misalnya untuk menyimpan data user).

1. Atur File .env

Buka .env lalu sesuaikan:

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

Pastikan database laravel_breeze sudah dibuat di MySQL/PostgreSQL.

2. Jalankan Migrasi

php artisan migrate

Laravel akan otomatis membuat tabel users, password_resets, failed_jobs, dan lainnya.

Menjalankan Proyek

Sekarang, jalankan server Laravel lagi:

php artisan serve

Lalu buka:
http://localhost:8000/register

Kamu akan melihat halaman Register dengan styling Tailwind CSS.
Coba daftar, lalu login – Breeze sudah siap dipakai! 🚀

Apa Saja yang Didapat dari Breeze?

Secara default, Breeze menyertakan fitur:

• ✅ Register & Login

• ✅ Forgot Password & Reset Password

• ✅ Email Verification (opsional)

• ✅ Middleware proteksi route (auth)

• ✅ Styling dengan Tailwind CSS

Misalnya, coba cek routes/web.php:

Route::middleware(['auth', 'verified'])->group(function () {
    Route::get('/dashboard', function () {
        return Inertia::render('Dashboard');
    })->name('dashboard');
});

Route /dashboard hanya bisa diakses jika user sudah login dan email terverifikasi.

Struktur Folder Penting

Jika kamu memilih Inertia + React, struktur folder frontend akan seperti ini:

resources/
  js/
    Pages/            # Halaman frontend React
    Components/       # Komponen shared React
routes/
  web.php             # Routing aplikasi
app/
  Http/Controllers/   # Logic backend
database/
  migrations/         # Struktur database

Kalau pakai Blade, folder utamanya ada di:

resources/views/auth/   # Halaman login, register, dll.
resources/views/layouts/

Best Practice Menggunakan Laravel Breeze

Breeze memang minimalis, tapi kamu bisa mengembangkannya lebih jauh.

1. Aktifkan Verifikasi Email

Tambahkan interface MustVerifyEmail di model User:

use Illuminate\Contracts\Auth\MustVerifyEmail;

class User extends Authenticatable implements MustVerifyEmail
{
    // ...
}

Lalu pastikan middleware verified ada di route.

2. Proteksi Route dengan Middleware

Jika punya halaman admin:

Route::middleware(['auth'])->group(function () {
    Route::get('/admin', [AdminController::class, 'index']);
});

3. Custom UI

Breeze sengaja dibuat sederhana agar kamu bisa kustomisasi.
Misalnya, ubah resources/js/Components/NavLink.jsx untuk mengatur style menu.

4. Multi-Language Support

Laravel punya sistem localization bawaan. Kamu bisa menambahkan file terjemahan di resources/lang/.

Tips Tambahan untuk Pemula

• Gunakan Laravel Debugbar saat belajar debugging.

• Biasakan membuat seeder untuk dummy data (php artisan db:seed).

• Jika ingin upgrade UI, coba gabungkan dengan Tailwind UI atau Flowbite.

• Untuk production, jangan lupa jalankan:

npm run build
php artisan config:cache
php artisan route:cache

FAQ: Laravel Breeze

1. Apa bedanya Laravel Breeze dengan Jetstream?

• Breeze lebih minimalis, cocok untuk belajar.

• Jetstream lebih kompleks, sudah ada team management, API token (Sanctum), dsb.

2. Apakah Laravel Breeze bisa dipakai untuk aplikasi besar?
Bisa. Breeze hanya menyediakan autentikasi dasar. Untuk aplikasi besar, kamu bisa tetap mengembangkannya sesuai kebutuhan.

3. Bisa nggak ganti frontend setelah instalasi (misalnya dari Blade ke React)?
Bisa, tapi lebih baik tentukan dari awal. Jika ganti di tengah jalan, harus menyesuaikan ulang file.

4. Apakah Laravel Breeze gratis?
Ya, open-source dan resmi dari Laravel.

5. Apakah Breeze cocok untuk pemula?
Sangat cocok, karena kodenya jelas, sederhana, dan mudah dipahami.