Tutorial step-by-step ini mengajarkan cara menginstall Laravel 11 terbaru, mengintegrasikan Vite, Breeze, Sanctum, serta Livewire untuk membangun aplikasi web modern, aman, dan responsif di tahun 2026.
1. Persiapan Lingkungan
1.1. Persyaratan Sistem
- PHP >= 8.3
- Composer 2.x
- Node.js >= 20 dengan npm atau Yarn
- Database (MySQL 8+, PostgreSQL, atau SQLite)
1.2. Buat Project Laravel Baru
composer create-project laravel/laravel my-app "11.*"Perintah ini menginstall Laravel 11 dengan semua dependensi default.
2. Instalasi Vite (Frontend Asset Bundler)
2.1. Hapus Laravel Mix
rm -rf webpack.mix.js resources/js/app.js resources/sass/app.scss2.2. Instalasi Vite dan plugin Laravel
npm install --save-dev vite laravel-vite-plugin2.3. Buat file 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.4. Tambahkan entry point
// resources/js/app.js
import './bootstrap';
// resources/css/app.css
@import "../node_modules/@tailwindcss/forms/dist/forms.css";
2.5. Update blade layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ config('app.name') }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
@yield('content')
</body>
</html>
Vite kini menjadi bundler default, memberikan HMR cepat.
3. Instalasi Laravel Breeze (Starter Kit)
3.1. Pasang Breeze via Composer
composer require laravel/breeze --dev3.2. Install scaffolding dengan Blade + Vite
php artisan breeze:install blade3.3. Jalankan migrasi dan npm
php artisan migrate
npm install
npm run devAnda kini memiliki autentikasi dasar (register, login, reset password) yang terintegrasi dengan Vite.
4. Integrasi Laravel Sanctum (API Token & SPA Authentication)
4.1. Instal Sanctum
composer require laravel/sanctum4.2. Publikasi konfigurasi & migrasi
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate4.3. Tambahkan middleware ke kernel
// app/Http/Kernel.php
'api' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
'throttle:api',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],
4.4. Buat route API contoh
// routes/api.php
use App\Http\Controllers\API\UserController;
Route::middleware('auth:sanctum')->get('/user', [UserController::class, 'show']);
Sanctum memungkinkan SPA yang dibangun dengan Blade atau Vue/React berkomunikasi aman via cookie.
5. Menambahkan Livewire (Komponen Interaktif)
5.1. Instal Livewire latest
composer require livewire/livewire
npm install --save-dev @livewire/vite-plugin
5.2. Update vite.config.js
import livewire from '@livewire/vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
livewire(),
],
});
5.3. Buat komponen Livewire
php artisan make:livewire Counter5.4. Implementasi contoh Counter
// app/Http/Livewire/Counter.php
namespace App\Http\Livewire;
use Livewire\Component;
class Counter extends Component
{
public $count = 0;
public function increment()
{
$this->count++;
}
public function render()
{
return view('livewire.counter');
}
}
<!-- resources/views/livewire/counter.blade.php -->
<h2>Count: {{ $count }}</h2>
<button wire:click="increment" class="px-4 py-2 bg-blue-600 text-white rounded">Increment</button>
</div>
5.5. Gunakan di halaman Blade
<!-- resources/views/dashboard.blade.php -->
<x-app-layout>
<x-slot name="header">
{{ __('Dashboard') }}
</x-slot>
<livewire:counter />
</x-app-layout>
Livewire bekerja mulus dengan Vite dan Breeze.
6. Best Practice Modern (2026)
- Environment Variables: Simpan kunci API, DB credentials, dan Sanctum secret di .env, never commit.
- Typed Route Names: Gunakan
Route::name('profile.show') dan route('profile.show') untuk menghindari hard‑code URL.
- PHPStan & Laravel Pint: Tambahkan
composer require --dev phpstan/phpstan laravel/pint dan konfigurasi strict level 9.
- Testing: Buat Feature test untuk API Sanctum dan unit test untuk Livewire dengan
php artisan test.
- Docker: Gunakan official Laravel Sail (Docker) untuk konsistensi lingkungan pengembangan.
- Cache Config & Routes: Deploy dengan
php artisan config:cache dan php artisan route:cache untuk performa.
Ikuti langkah di atas, dan Anda akan memiliki stack Laravel 11 yang siap produksi dengan Vite, Breeze, Sanctum, dan Livewire.
Dengan mengikuti tutorial ini, Anda telah menyiapkan proyek Laravel 11 modern yang memanfaatkan Vite untuk asset bundling, Breeze untuk scaffold autentikasi, Sanctum untuk keamanan API, serta Livewire untuk interaktivitas UI tanpa menulis JavaScript berlebih. Ikuti best practice 2026 untuk menjaga kode tetap bersih, teruji, dan siap skala.
Panduan step-by-step setup Laravel 11 terbaru dengan Vite, Breeze, Sanctum, dan Livewire. Praktik modern 2026 untuk aplikasi PHP Framework cepat, aman, dan interaktif.
Laravel,PHP Framework,Web Development
#Laravel #LaravelIndonesia #PHP #WebDev #Backend
.png)
Tidak ada komentar:
Posting Komentar