Tutorial step-by-step untuk menginstal Laravel 10, mengkonfigurasi Vite, menambahkan Breeze untuk scaffolding UI, serta mengamankan API dengan Sanctum. Cocok untuk pengembang yang ingin memulai proyek modern pada tahun 2026.
1. Persiapan Lingkungan
1.1. Sistem Prasyarat
- PHP >= 8.2
- Composer 2.x
- Node.js >= 20 LTS
- npm atau Yarn
- Database MySQL 8 atau PostgreSQL 15
1.2. Membuat Project Laravel
composer create-project laravel/laravel blog "10.*" --prefer-distMasuk ke direktori proyek:
cd blog2. Mengganti Mix dengan Vite
2.1. Instalasi Vite
composer require laravel/vite-plugin
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([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});2.3. Update Blade Layout
Ganti tag @vite pada resources/views/layouts/app.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title')</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
@yield('content')
</body>
</html>3. Menambahkan Breeze untuk Authentication UI
3.1. Instalasi Breeze
composer require laravel/breeze --dev
php artisan breeze:install blade
npm install && npm run dev3.2. Migrasi Database
php artisan migrate3.3. Verifikasi
Buka http://localhost:8000/register untuk memastikan form registrasi berfungsi.
4. Mengamankan API dengan Sanctum
4.1. Instalasi Sanctum
composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate4.2. Konfigurasi Middleware
Tambahkan EnsureFrontendRequestsAreStateful::class ke api middleware grup pada app/Http/Kernel.php:
'api' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
'throttle:api',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],4.3. Membuat Token API
// App/Http/Controllers/AuthController.php
public function token(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]);
}4.4. Menggunakan Token di Frontend
Contoh dengan fetch API:
fetch('/api/user', {
headers: {
'Authorization': `Bearer ${token}`,
'Accept': 'application/json'
}
}).then(res => res.json()).then(data => console.log(data));5. Best Practice Modern
- Environment Variables: Simpan semua kredensial di
.envdan gunakanconfig:cachesetelah perubahan. - Cache Config & Routes:
php artisan config:cache&php artisan route:cacheuntuk produksi. - Deploy dengan Docker: Gunakan image resmi PHP 8.2‑fpm + Nginx, volume untuk
storagedanvendor. - Testing: Tulis Feature Test dengan
PestatauPHPUnituntuk endpoint API Sanctum. - Code Style: Aktifkan
Laravel Pintuntuk standar coding otomatis.
Dengan mengikuti langkah-langkah di atas, Anda memiliki proyek Laravel 10 yang dikonfigurasi dengan Vite, UI modern dari Breeze, serta API aman menggunakan Sanctum. Semua ini mencerminkan best practice Laravel pada 2026, siap untuk skala produksi dan pengembangan berkelanjutan.
Tutorial lengkap setup Laravel 10 dengan Vite, Breeze, dan Sanctum. Langkah demi langkah instalasi, konfigurasi, contoh kode, dan best practice modern untuk pengembangan web tahun 2026.
Laravel,PHP Framework,Web Development
#Laravel #LaravelIndonesia #PHP #WebDev #Backend
.png)
