Tutorial step‑by‑step ini membahas cara menginstal Laravel 11, mengkonfigurasi Vite, Breeze, dan Sanctum secara optimal untuk pengembangan aplikasi web modern di tahun 2026.
1. Prerequisite
1.1. Sistem Operasi & Tools
Pastikan Anda menggunakan OS terbaru (Windows 11, macOS Ventura, atau Linux). Install:
- PHP 8.3+ (ext‑openssl, ext‑pdo, ext‑mbstring, ext‑tokenizer)
- Composer 2.x
- Node.js 20.x dan npm 10.x
- Git
1.2. Buat Direktori Project
mkdir my-laravel-app && cd my-laravel-app2. Instalasi Laravel 11
2.1. Menggunakan Composer
composer create-project laravel/laravel . "11.*" --prefer-distPerintah ini mengunduh Laravel 11 stabil beserta semua dependensi.
2.2. Verifikasi Instalasi
php artisan --versionOutput contoh: Laravel Framework 11.x.x
3. Konfigurasi Vite (Asset Bundler Modern)
3.1. Install dependencies
npm installLaravel 11 sudah menyertakan vite.config.js default.
3.2. Menyesuaikan 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,
}),
],
});Jika menggunakan Vue 3 atau React, tambahkan plugin terkait.
3.3. Jalankan Dev Server
npm run devVite akan melayani asset pada http://localhost:5173 dengan hot‑module‑replacement.
4. Instalasi Laravel Breeze (Starter Kit)
4.1. Install paket Breeze
composer require laravel/breeze --dev4.2. Pilih stack (Blade, Vue, React, Inertia)
Contoh dengan Blade (paling ringan):
php artisan breeze:install bladeJika menggunakan Vue 3 + Vite:
php artisan breeze:install vue4.3. Install NPM dependencies & build
npm install && npm run dev4.4. Migrasi database
php artisan migrateIni membuat tabel users, password_resets, dll.
5. Konfigurasi Laravel Sanctum (API Authentication)
5.1. Install Sanctum
composer require laravel/sanctum5.2. Publish konfigurasi & migrasi
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate5.3. Tambahkan middleware ke api guard
// app/Http/Kernel.php
'api' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
'throttle:api',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],5.4. Buat Route API contoh
// routes/api.php
use AppHttpControllersAPIUserController;
Route::middleware('auth:sanctum')->get('/user', [UserController::class, 'profile']);5.5. Contoh Request Token di Frontend (Vue 3)
import axios from 'axios';
await axios.get('/sanctum/csrf-cookie'); // set XSRF token
const {data} = await axios.post('/login', {email, password});
localStorage.setItem('token', data.token);
axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
await axios.get('/api/user');6. Best Practice Modern
6.1. Environment Management
- Gunakan
.env.examplesebagai template. - Jangan pernah commit
.envke repo.
6.2. Struktur Direktori
- Pindahkan custom service ke
app/Services. - Gunakan
app/Policiesuntuk otorisasi bila memakai Spatie Permission atau built‑in gates.
6.3. Caching & Config Optimisation
php artisan config:cache
php artisan route:cache
php artisan view:cache6.4. CI/CD Pipeline (Contoh GitHub Actions)
name: Laravel CI
on: [push, pull_request]
jobs:
tests:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup PHP
uses: shivammathur/setup-php@v2
with:
php-version: '8.3'
- name: Install Composer deps
run: composer install --prefer-dist --no-progress --no-suggest
- name: Install Node deps
run: npm ci
- name: Run Tests
run: php artisan test
7. Deploy ke Production
7.1. Build assets
npm run build7.2. Optimasi Laravel
php artisan optimize
php artisan config:cache
php artisan route:cache
php artisan view:cache7.3. Server Requirements
- PHP 8.3+ dengan OPCache.
- Web server: Nginx atau Apache (prefer Nginx).
- Set
APP_ENV=productiondanAPP_DEBUG=false.
Dengan mengikuti tutorial ini, Anda memiliki fondasi Laravel 11 yang modern: Vite untuk asset bundling cepat, Breeze sebagai starter kit UI, dan Sanctum untuk API authentication yang aman. Terapkan best practice seperti environment isolation, caching, dan CI/CD untuk memastikan kode Anda siap produksi dan mudah dipelihara di era 2026.
Tutorial lengkap setup Laravel 11 dengan Vite, Breeze, dan Sanctum. Langkah instalasi, konfigurasi, contoh kode, dan best practice modern untuk pengembangan web 2026.
Laravel,PHP Framework,Web Development
#Laravel #LaravelIndonesia #PHP #WebDev #Backend
.png)
