Tutorial step‑by‑step ini menjelaskan cara menginstal Laravel 11 terbaru serta mengintegrasikan tool modern seperti Vite, Breeze, Laravel Sanctum, dan TailwindCSS untuk proyek PHP Framework yang aman dan cepat.
1. Prasyarat Sistem
Pastikan environment Anda memenuhi persyaratan berikut:
- PHP >= 8.2
- Composer 2.x
- Node.js >= 20 dengan npm atau Yarn
- Database (MySQL 8+, Postgres, atau SQLite)
2. Instalasi Laravel 11
composer create-project laravel/laravel:^11.0 my-project
cd my-projectPerintah di atas meng‑download Laravel 11 stabil ke folder my-project dan masuk ke direktori proyek.
3. Konfigurasi Vite
Laravel 11 sudah menyertakan Vite secara default. Pastikan file vite.config.js ada di root proyek. Jika tidak, jalankan:
npm install --save-dev vite laravel-vite-plugin
Selanjutnya, 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 Vite
npm run dev // untuk development
npm run build // untuk production4. Install Laravel Breeze (Starter Kit)
Breeze menyediakan scaffolding autentikasi ringan dengan Blade atau Vue/React. Pada contoh ini gunakan Blade + Tailwind.
composer require laravel/breeze --dev
php artisan breeze:install blade
npm install && npm run dev
php artisan migrateSetelah migration, Anda sudah memiliki route login, register, dan dashboard.
5. Integrasi TailwindCSS
Jika belum terinstal, jalankan:
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -pUbah tailwind.config.js:
module.exports = {
content: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
theme: {
extend: {},
},
plugins: [],
};Dan di resources/css/app.css tambahkan:
@tailwind base;
@tailwind components;
@tailwind utilities;6. Setup Laravel Sanctum untuk API Authentication
- Instal paket Sanctum
composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrateJika Anda menggunakan SPA (misalnya Vue) aktifkan middleware EnsureFrontendRequestsAreStateful di app/Http/Kernel.php pada grup api:
'api' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
'throttle:api',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],Contoh Endpoint Login API
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
use Laravel\Sanctum\HasApiTokens;
Route::post('/login', function (Request $request) {
$user = User::where('email', $request->email)->first();
if (! $user || ! Hash::check($request->password, $user->password)) {
return response()->json(['message' => 'Invalid credentials'], 401);
}
$token = $user->createToken('spa-token')->plainTextToken;
return response()->json(['token' => $token]);
});
Gunakan token ini di header Authorization: Bearer {token} untuk mengakses route yang dilindungi auth:sanctum.
7. Best Practice Modern
- Environment Variables: Simpan rahasia (APP_KEY, DB_PASSWORD, SANCTUM_STATEFUL_DOMAINS) di
.envdan jangan commit. - Cache Config & Routes: Pada produksi jalankan
php artisan config:cachedanphp artisan route:cache. - Database Migrations: Selalu gunakan
php artisan migrate --forcesaat deploy CI/CD. - Code Quality: Integrasikan PHPStan atau Psalm, serta Laravel Pint untuk standar coding.
- Testing: Tulis Feature Test untuk autentikasi Sanctum dan UI test untuk Breeze menggunakan Pest atau PHPUnit.
8. Deploy ke Production (Contoh Laravel Forge)
- Push repository ke GitHub.
- Buat site baru di Laravel Forge, pilih PHP 8.2, dan hubungkan repo.
- Set environment variables di Forge, jalankan
composer install --optimize-autoloader --no-dev. - Jalankan
npm ci && npm run buildpada server. - Eksekusi
php artisan migrate --forcedanphp artisan config:cache.
Setelah itu, situs siap diakses dengan performa Vite + Tailwind yang ter‑optimasi.
Dengan mengikuti langkah‑langkah di atas, Anda memiliki proyek Laravel 11 yang terstruktur, aman, dan siap dikembangkan dengan teknologi front‑end modern. Kombinasi Vite, Breeze, TailwindCSS, dan Sanctum memberikan workflow developer yang cepat serta keamanan API yang handal, menjadikan foundation ideal untuk aplikasi web skala kecil hingga enterprise.
Panduan step-by-step setup Laravel 11 dengan Vite, Breeze, Sanctum, dan TailwindCSS. Ikuti tutorial terbaru 2026 untuk proyek Laravel modern yang aman dan optimal.
Laravel,PHP Framework,Web Development
#Laravel #LaravelIndonesia #PHP #WebDev #Backend
.png)
