Tutorial step‑by‑step ini memandu Anda menginstal Laravel 11 terbaru, mengonfigurasi Vite, menambahkan Breeze dengan TailwindCSS, mengamankan API dengan Sanctum, serta mengoptimalkan pengembangan menggunakan TypeScript.
1. Prerequisite
- PHP >= 8.2
- Composer 2.7+
- Node.js 20+ dan npm 10+
- Database (MySQL 8 atau PostgreSQL 15)
2. Instalasi Laravel 11
composer create-project laravel/laravel laravel-modern "^11.0"Masuk ke folder proyek:
cd laravel-modern2.1. Memastikan Environment
cp .env.example .env
php artisan key:generateSesuaikan .env dengan konfigurasi database Anda.
3. Setup Vite (alat bundler modern)
Laravel 11 sudah menyertakan Vite secara default, namun kita perlu menyesuaikan untuk TypeScript dan TailwindCSS.
3.1. Install dependencies
npm install -D vite laravel-vite-plugin@latest
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npm install -D typescript@latest @vitejs/plugin-vue@latest
3.2. Inisialisasi Tailwind
npx tailwindcss init -pUbah tailwind.config.js:
module.exports = {
content: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.ts',
'./resources/**/*.vue',
],
theme: { extend: {} },
plugins: [],
};3.3. Konfigurasi Vite
Edit vite.config.js:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.ts'],
refresh: true,
}),
vue(),
],
});3.4. Mengubah entry point
Rename resources/js/app.js menjadi app.ts dan tambahkan contoh:
import './bootstrap';
import '../css/app.css';
console.log('Laravel 11 + Vite + TypeScript ready');4. Instalasi Laravel Breeze dengan Tailwind & Vue 3
composer require laravel/breeze --dev
php artisan breeze:install vuePerintah di atas akan menambahkan scaffolding autentikasi berbasis Vue, Tailwind, dan Vite.
4.1. Migrasi Database
php artisan migrate4.2. Compile assets
npm run devAnda sekarang dapat mengakses /register dan /login dengan UI modern.
5. Mengamankan API dengan Laravel Sanctum
5.1. Instalasi Sanctum
composer require laravel/sanctum5.2. Publish konfigurasi & migration
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate5.3. Middleware
Tambahkan middleware EnsureFrontendRequestsAreStateful::class pada grup api di app/Http/Kernel.php:
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,5.4. Contoh Route API yang dilindungi
use App\Http\Controllers\API\ProfileController;
Route::middleware('auth:sanctum')->get('/user/profile', [ProfileController::class, 'show']);5.5. Frontend: Mengambil token
Setelah login via Breeze, cookie laravel_session dan XSRF-TOKEN otomatis dikelola. Untuk request Axios:
import axios from 'axios';
axios.defaults.withCredentials = true;
axios.get('/api/user/profile').then(r => console.log(r.data));6. Best Practice Modern
- Environment segregation: gunakan
.env.testinguntuk CI dan.env.productionuntuk produksi. - Static analysis: tambahkan
phpstandanpsalmke dalam pipeline CI. - Cache config & routes di production:
php artisan config:cache && php artisan route:cache. - Queue & Jobs: gunakan driver
redisdan konfigurasi supervisor untuk worker. - Version control: commit hanya file
vite.config.js,package.json, danresourcesyang berubah; jangan commitnode_modulesatauvendor. - Testing: gunakan
PestPHPatauPHPUnitbersamaLaravel Sanctumuntuk menguji endpoint API.
7. Deploy ke Production (Laravel 11 + Vite)
# Build assets
npm run build
# Optimasi Laravel
php artisan config:cache
php artisan route:cache
php artisan view:cache
# Set proper permissions
chown -R www-data:www-data storage bootstrap/cache
Upload seluruh proyek kecuali node_modules dan vendor, kemudian jalankan composer install --optimize-autoloader --no-dev di server.
Dengan mengikuti langkah‑langkah di atas, Anda memiliki proyek Laravel 11 yang sepenuhnya modern: Vite untuk asset bundling, Breeze + Vue 3 untuk UI cepat, TailwindCSS untuk styling, serta Sanctum untuk proteksi API. Mengadopsi best practice seperti caching, static analysis, dan queueing memastikan aplikasi siap skala produksi dan mudah dipelihara.
Tutorial lengkap setup Laravel 11 terbaru dengan Vite, Breeze, Tailwind, TypeScript, dan Sanctum. Ikuti langkah demi langkah, konfigurasi, contoh kode, dan best practice modern.
Laravel,PHP Framework,Web Development
#Laravel #LaravelIndonesia #PHP #WebDev #Backend
.png)
