Tutorial step‑by‑step ini membantu Anda menginstal Laravel 11 terbaru, mengkonfigurasi Vite, Breeze, Sanctum, serta menambahkan Livewire untuk pengalaman full‑stack yang modern dan aman.
1. Prasyarat
- PHP >= 8.2
- Composer 2.x
- Node.js >= 20 dan npm atau Yarn
- Database MySQL/PostgreSQL/SQLite
2. Instalasi Laravel 11
composer create-project laravel/laravel blog "11.*" --prefer-dist
cd blogPastikan .env berisi kredensial database yang tepat, lalu jalankan migrasi:
php artisan migrate3. Konfigurasi Vite (frontend bundler)
Laravel 11 sudah menggunakan Vite secara default. Instalasi dependensi:
npm install
npm run devUntuk produksi:
npm run build4. Menambahkan Laravel Breeze (starter kit auth)
composer require laravel/breeze --dev
php artisan breeze:install vue
npm install && npm run devBreeze menyediakan route, controller, dan view dasar dengan autentikasi berbasis session.
4.1. Menjalankan migrasi auth
php artisan migrate5. Menyiapkan Laravel Sanctum (API token & SPA authentication)
composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrateTambahkan middleware EnsureFrontendRequestsAreStateful::class pada app/Http/Kernel.php di grup api:
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,Konfigurasi CORS di config/cors.php agar domain frontend (misal http://localhost:5173) di‑allow.
5.1. Contoh penggunaan token di controller
use Laravel\Sanctum\HasApiTokens;
public function login(Request $request)
{
$user = User::where('email', $request->email)->first();
if (! $user || ! Hash::check($request->password, $user->password)) {
return response()->json(['message' => 'Invalid credentials'], 401);
}
$token = $user->createToken('api-token')->plainTextToken;
return response()->json(['token' => $token]);
}6. Menambahkan Livewire (komponen interaktif tanpa JavaScript berlebih)
composer require livewire/livewire
php artisan livewire:install
npm run devLivewire otomatis mendaftar script Vite. Buat contoh komponen:
php artisan make:livewire CounterFile app/Http/Livewire/Counter.php:
use Livewire\Component;
class Counter extends Component
{
public $count = 0;
public function increment()
{
$this->count++;
}
public function render()
{
return view('livewire.counter');
}
}View resources/views/livewire/counter.blade.php:
<div>
<button wire:click="increment">Tambah</button>
<span>{{ $count }}</span>
</div>Masukkan ke halaman Blade:
@livewire('counter')7. Best Practice Modern
- Environment variables: gunakan
.env.exampleyang lengkap dan jangan commit.envke repo. - Docker: bangun container PHP‑FPM, Nginx, dan MySQL untuk konsistensi lingkungan.
- Testing: tulis unit & feature test dengan PHPUnit & Pest; jalankan
php artisan testdalam CI. - Code style: terapkan PHP‑CS‑Fixer dan Laravel Pint untuk standar kode.
- Cache config & routes:
php artisan config:cache&php artisan route:cachesebelum deploy. - Security: aktifkan
APP_DEBUG=falsedi produksi, gunakanHTTPS& HSTS, serta setSanctumcookiesame_site=lax.
8. Deploy ke Production
# contoh dengan Laravel Forge atau Vapor
git push production main
ssh user@server
cd /var/www/html
composer install --optimize-autoloader --no-dev
npm ci && npm run build
php artisan migrate --force
php artisan config:cache
php artisan route:cache
php artisan view:cacheSetelah selesai, pastikan queue dan scheduler berjalan via Supervisor atau systemd.
Dengan mengikuti langkah‑langkah di atas, Anda memiliki proyek Laravel 11 yang modern, aman, dan siap dikembangkan lebih lanjut menggunakan Vite, Breeze, Sanctum, dan Livewire. Praktik terbaik seperti pengelolaan environment, testing, dan deployment otomatis akan memastikan aplikasi Anda skalabel dan mudah dipelihara.
Tutorial lengkap setup Laravel 11 dengan Vite, Breeze, Sanctum, dan Livewire. Langkah demi langkah, konfigurasi, contoh kode, dan best practice modern untuk pengembangan web dengan Laravel, PHP Framework, dan Web Development.
Laravel,PHP Framework,Web Development
#Laravel #LaravelIndonesia #PHP #WebDev #Backend
.png)
