Pelajari cara menginstal Laravel 11 terbaru, mengkonfigurasi Vite, Breeze, dan Sanctum secara step‑by‑step untuk membangun aplikasi web modern dengan PHP Framework Laravel.
1. Prerequisite
- PHP >= 8.2
- Composer terbaru
- Node.js >= 20 & npm atau Yarn
- Database (MySQL, PostgreSQL, dll)
2. Instalasi Laravel 11
composer create-project laravel/laravel blog-app "^11.0"Masuk ke folder proyek:
cd blog-appPenjelasan
Perintah di atas mengunduh kerangka kerja Laravel 11 yang stabil pada tahun 2026.
3. Setup Vite (Asset Bundler Modern)
Laravel 11 sudah menyertakan Vite secara default, tetapi pastikan dependensi npm ter‑install:
npm install
# atau yarn
yarn installKonfigurasi Vite
Jika Anda membutuhkan konfigurasi tambahan, edit 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,
}),
],
});Menjalankan Dev Server
npm run dev
# atau yarn devVite akan hot‑reload asset setiap perubahan.
4. Instalasi Laravel Breeze (Starter Kit UI)
composer require laravel/breeze --dev
php artisan breeze:install vue
# atau React: breeze:install react
npm install && npm run devPenjelasan
Breeze menyediakan scaffolding autentikasi (login, register, reset password) dengan TailwindCSS dan pilihan stack front‑end (Vue, React, Blade). Di contoh ini dipilih Vue.
5. Konfigurasi Laravel Sanctum (API Token & SPA Authentication)
composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrateMiddleware & Kernel
Tambahkan middleware EnsureFrontendRequestsAreStateful::class pada api guard di app/Http/Kernel.php:
protected $middlewareGroups = [
'api' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
'throttle:api',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],
];Penggunaan Token Personal
// Membuat token
$token = $user->createToken('mobile-app')->plainTextToken;
// Menggunakan di request header
Authorization: Bearer {token}6. Contoh Kode CRUD dengan Vue + Sanctum
Route API
use App\Http\Controllers\PostController;
Route::middleware('auth:sanctum')->group(function () {
Route::apiResource('posts', PostController::class);
});Controller
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
class PostController extends Controller
{
public function index() { return Post::latest()->paginate(10); }
public function store(Request $request) {
$post = Post::create($request->validate([
'title' => 'required|string',
'body' => 'required|string',
]));
return response()->json($post, 201);
}
// show, update, destroy…
}
Vue Component (resources/js/components/PostList.vue)
<template>
<div>
<h1>Posts</h1>
<ul>
<li v-for="post in posts.data" :key="post.id">{{ post.title }}</li>
</ul>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
const posts = ref({});
onMounted(async () => {
const response = await axios.get('/api/posts');
posts.value = response.data;
});
</script>
Penjelasan Singkat
Axios otomatis mengirim cookie Laravel session karena Sanctum berada dalam mode SPA, sehingga request ter‑autentikasi.
7. Best Practice Modern
- Environment Segregation: gunakan
.env.exampledan CI/CD untuk inject variabel. - Static Analysis: jalankan
phpstandanlarastantiap commit. - Testing: gunakan
phpunituntuk unit & integration test, sertaLaravel Duskuntuk end‑to‑end. - Cache & Queue: konfigurasi Redis sebagai driver cache dan queue (default di Laravel 11).
- Code Style: terapkan
Laravel Pintuntuk formatting otomatis.
8. Deploy ke Production (Laravel Vapor atau Traditional VPS)
- Set
APP_ENV=productiondanCACHE_DRIVER=redis. - Compile assets:
npm run build. - Jalankan migrasi:
php artisan migrate --force. - Optimasi konfigurasi:
php artisan config:cache,php artisan route:cache,php artisan view:cache.
Dengan mengikuti langkah‑langkah di atas, Anda memiliki proyek Laravel 11 yang terintegrasi Vite, Breeze, dan Sanctum—siap untuk pengembangan frontend modern, API yang aman, serta deployment skala production. Terapkan best practice seperti testing, static analysis, dan caching untuk menjaga kode tetap bersih, aman, dan performant.
Tutorial step‑by‑step setup Laravel 11 dengan Vite, Breeze, dan Sanctum. Panduan lengkap instalasi, konfigurasi, contoh kode, dan best practice modern untuk PHP Framework Laravel.
Laravel,PHP Framework,Web Development
#Laravel #LaravelIndonesia #PHP #WebDev #Backend
.png)
