Tutorial step-by-step untuk menginstal Laravel 11 terbaru, mengkonfigurasi Vite, Breeze UI, dan Sanctum API authentication dengan standar keamanan dan performa terkini tahun 2026.
1. Persiapan Lingkungan
1.1. Sistem Operasi & Prasyarat
- OS: Ubuntu 22.04 LTS atau Windows 11
- PHP >= 8.3, ekstensi: OpenSSL, PDO, Mbstring, Tokenizer, XML, Ctype, JSON, Bcmath, GD
- Composer 2.8+
- Node.js 20.x dan npm 10.x
- Database: MySQL 8 atau PostgreSQL 15
1.2. Instalasi Composer & Node
# Composer
curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
# Node.js & npm (via nvm)
nvm install 20
nvm use 20
2. Membuat Project Laravel 11
composer create-project laravel/laravel laravel11-app "^11.0"
cd laravel11-app
2.1. Verifikasi Instalasi
php artisan --version
# Output: Laravel Framework 11.x.x
3. Mengatur Vite (Asset Bundler bawaan)
3.1. Instalasi Dependensi Frontend
npm install
3.2. Konfigurasi vite.config.js
Laravel 11 sudah menyertakan konfigurasi standar. Tambahkan alias untuk Vue 3 (jika diperlukan).
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/js/app.js', 'resources/css/app.css'],
refresh: true,
}),
],
resolve: {
alias: {
'@': '/resources/js',
},
},
});
3.3. Menjalankan Development Server
npm run dev
# Vite akan melayani assets pada http://localhost:5173
4. Menambahkan Laravel Breeze (Starter Kit UI)
4.1. Instalasi Breeze dengan Blade
composer require laravel/breeze --dev
php artisan breeze:install blade
npm install && npm run dev
php artisan migrate
4.2. Opsi: Breeze dengan Inertia + Vue 3
# Pilih stack Inertia+Vue
php artisan breeze:install vue
npm install && npm run dev
4.3. Verifikasi Tampilan
Jalankan php artisan serve dan buka http://127.0.0.1:8000. Anda akan melihat halaman beranda Breeze yang sudah ter‑styled.
5. Mengintegrasikan Laravel Sanctum untuk API Authentication
5.1. Instalasi Sanctum
composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate
5.2. Konfigurasi Middleware
Tambahkan EnsureFrontendRequestsAreStateful::class pada grup middleware api di app/Http/Kernel.php jika Anda menggunakan SPA.
'api' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
'throttle:api',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],
5.3. Membuat Route API Terproteksi
// routes/api.php
use AppHttpControllersProfileController;
Route::middleware('auth:sanctum')->get('/user', [ProfileController::class, 'show']);
5.4. Membuat Controller
php artisan make:controller ProfileController
// app/Http/Controllers/ProfileController.php
json($request->user());
}
}
5.5. Frontend – Mengirim Token
Jika menggunakan Breeze Vue, contoh di resources/js/app.js:
import axios from 'axios';
axios.defaults.withCredentials = true;
axios.get('/sanctum/csrf-cookie').then(() => {
// Sekarang dapat mengakses endpoint
axios.get('/api/user').then(response => console.log(response.data));
});
6. Best Practice Modern (2026)
- Environment Files: Simpan rahasia di
.envdan gunakanenv()di config. - Cache Config & Routes:
php artisan config:cache&php artisan route:cachepada production. - Queue & Jobs: Gunakan Laravel Queue (Redis) untuk proses async seperti email.
- Testing: Tuliskan Feature Test dengan Pest atau PHPUnit untuk API endpoint Sanctum. li>Static Analysis: Integrasikan PHPStan & Laravel Pint untuk coding standard.
- Docker: Deploy menggunakan Laravel Sail (Docker) untuk konsistensi lingkungan.
7. Deploy ke Production
- Build assets:
npm run build - Set
APP_ENV=productiondanAPP_DEBUG=false - Cache konfigurasi & route.
- Gunakan
php artisan migrate --forcedanphp artisan storage:link. - Setup queue worker:
php artisan queue:work --daemon.
Dengan mengikuti langkah‑langkah di atas, Anda memiliki proyek Laravel 11 yang modern, siap untuk pengembangan SPA atau API, menggunakan Vite untuk aset cepat, Breeze sebagai UI starter kit, serta Sanctum untuk otentikasi token yang aman. Terapkan best practice seperti caching, queue, dan static analysis untuk memastikan aplikasi production‑ready di tahun 2026.
Tutorial lengkap setup Laravel 11 dengan Vite, Breeze, dan Sanctum. Langkah demi langkah instalasi, konfigurasi, contoh kode, dan best practice modern untuk pengembangan web 2026.
Laravel,PHP Framework,Web Development
#Laravel #LaravelIndonesia #PHP #WebDev #Backend
.png)
