Tutorial step-by-step menginstal Laravel 11 terbaru, mengkonfigurasi Vite, Breeze, Sanctum, serta menambahkan Jetstream untuk otentikasi API modern.
1. Persiapan Lingkungan
1.1. Persyaratan Sistem
- PHP >= 8.2
- Composer 2.x
- Node.js >= 20 (untuk Vite)
- Database MySQL 8 atau PostgreSQL
1.2. Membuat Project Laravel 11
composer create-project laravel/laravel blog "11.*" --prefer-distMasuk ke folder project:
cd blog2. Instalasi Vite (Laravel Mix sudah digantikan)
2.1. Install dependencies
npm install --save-dev vite laravel-vite-plugin2.2. Konfigurasi vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});2.3. Update Blade Layout
Ganti @vite pada resources/views/layouts/app.blade.php:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('app.name') }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
@yield('content')
</body>
</html>3. Instalasi Breeze (Starter Kit untuk autentikasi berbasis Blade)
3.1. Install package
composer require laravel/breeze --dev
php artisan breeze:install blade3.2. Install NPM dependencies & compile
npm install
npm run dev3.3. Migrasi Database
php artisan migrate4. Menambahkan Sanctum untuk API Token Authentication
4.1. Install Sanctum
composer require laravel/sanctum4.2. Publish konfigurasi & migration
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate4.3. Konfigurasi Middleware
Tambahkan EnsureFrontendRequestsAreStateful::class ke grup api pada app/Http/Kernel.php:
'api' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
'throttle:api',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],4.4. Contoh Endpoint Token
use Illuminate\Http\Request;
use App\Models\User;
use Laravel\Sanctum\PersonalAccessToken;
Route::post('/login', function (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]);
});5. (Opsional) Upgrade ke Jetstream dengan Livewire atau Inertia
5.1. Install Jetstream
composer require laravel/jetstream
php artisan jetstream:install livewire --teams5.2. Migrate & compile
php artisan migrate
npm run dev5.3. Penjelasan Singkat
Jetstream menambahkan fitur tim, profil, dua faktor, serta integrasi Livewire atau Inertia yang modern. Pilih livewire bila ingin komponen Blade reaktif tanpa menulis JavaScript berat.
6. Best Practice Modern
- Gunakan environment variables (.env) untuk semua kredensial.
- Aktifkan
APP_DEBUG=falsedi production. - Set
APP_URLdengan HTTPS. - Cache konfigurasi:
php artisan config:cachedan route:php artisan route:cache. - Gunakan
php artisan view:cacheuntuk Blade. - Deploy dengan
php artisan storage:linkdanphp artisan queue:work --daemonbila memakai queue.
7. Verifikasi Instalasi
Jalankan server local dan pastikan semua fitur bekerja:
php artisan serveBuka http://127.0.0.1:8000 – Anda akan melihat halaman landing Breeze. Coba endpoint /api/login dengan Postman untuk memverifikasi Sanctum.
Dengan mengikuti langkah‑langkah di atas, Anda kini memiliki aplikasi Laravel 11 yang sepenuhnya modern: Vite sebagai bundler, Breeze untuk UI Blade, Sanctum untuk API token, serta opsi Jetstream bila butuh fitur tim atau Livewire. Praktik terbaik yang diterapkan memastikan performa optimal dan keamanan produksi sehingga siap dikembangkan lebih lanjut.
Tutorial lengkap setup Laravel 11 dengan Vite, Breeze, Sanctum, dan Jetstream. Langkah demi langkah instalasi, konfigurasi, contoh kode, dan best practice modern untuk PHP Framework Laravel.
Laravel,PHP Framework,Web Development
#Laravel #LaravelIndonesia #PHP #WebDev #Backend
.png)
Tidak ada komentar:
Posting Komentar