Panduan lengkap langkah demi langkah untuk menyiapkan proyek Laravel 11 terbaru dengan stack modern termasuk Vite, Laravel Breeze, Laravel Sanctum, dan TailwindCSS.
1. Persyaratan Sistem
- PHP >= 8.2
- Composer 2.x
- Node.js >= 20 & npm
- Database MySQL 8.x atau PostgreSQL
2. Instalasi Laravel 11
composer create-project laravel/laravel example-app "11.*"Masuk ke folder proyek:
cd example-appPenjelasan
Perintah di atas mengunduh skeleton Laravel 11 yang sudah stabil pada tahun 2026.
3. Mengatur Vite (Asset Bundler bawaan)
Laravel 11 sudah menggantikan Laravel Mix dengan Vite secara default. Pastikan file vite.config.js ada.
npm install
npm run devPenjelasan
Perintah npm install menginstal semua dependency JavaScript, termasuk vite, laravel-vite-plugin, dan tailwindcss. npm run dev menjalankan server Vite dengan hot‑module replacement.
4. Instalasi TailwindCSS
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -pSesuaikan tailwind.config.js:
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
};Penjelasan
Tailwind kini terdeteksi pada semua file Blade dan Vue sehingga kelas utility dapat diproses oleh PurgeCSS otomatis.
5. Menambahkan Laravel Breeze (Starter Kit)
composer require laravel/breeze --dev
php artisan breeze:install vue
npm install && npm run devJika ingin menggunakan Inertia atau Blade, ubah parameternya (blade, react, react-ts, inertia).
Penjelasan
Breeze menyediakan scaffolding autentikasi (login, register, password reset) dengan Vue 3 + Vite, sudah terintegrasi dengan Tailwind.
6. Mengamankan API dengan Laravel Sanctum
composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrateTambah middleware pada api guard di config/sanctum.php bila diperlukan, misalnya ensure_frontend_requests_are_stateful untuk SPA.
Konfigurasi SPA
// config/sanctum.php
'stateful' => explode(",", env('SANCTUM_STATEFUL_DOMAINS', 'localhost,127.0.0.1')),
// .env
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost
Penjelasan
Sanctum memungkinkan autentikasi token berbasis cookie untuk SPA yang dibangun dengan Vue (atau React) yang dirender oleh Vite.
7. Menyiapkan Database
// .env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_demo
DB_USERNAME=root
DB_PASSWORD=secretJalankan migrasi:
php artisan migratePenjelasan
Database default berisi tabel users, password_resets, dan tabel yang dibutuhkan Sanctum (personal_access_tokens).
8. Menambahkan Route API dengan Sanctum
// routes/api.php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\API\ProfileController;
Route::middleware('auth:sanctum')->group(function () {
Route::get('/user/profile', [ProfileController::class, 'show']);
});Contoh Controller:
// app/Http/Controllers/API/ProfileController.php
namespace App\Http\Controllers\API;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
class ProfileController extends Controller {
public function show(Request $request) {
return response()->json($request->user());
}
}
Penjelasan
Middleware auth:sanctum memvalidasi cookie atau token yang di‑issue oleh Sanctum.
9. Best Practice Modern
- Environment segregation: gunakan
.env.testinguntuk CI/CD. - Laravel Pint & PHPStan:
composer require laravel/pint --devdancomposer require phpstan/phpstan --devuntuk kode standar. - Feature testing: gunakan
php artisan testdenganRefreshDatabasetrait. - Cache configuration: aktifkan Redis pada
CACHE_DRIVER=redisuntuk produksi. - Queue driver: gunakan
QUEUE_CONNECTION=databaseatauredisuntuk job async.
10. Deploy ke Production (contoh dengan Laravel Vapor)
- Instal CLI Vapor:
composer require laravel/vapor-cli --dev - Login:
vapor login - Deploy:
vapor deploy production
Vapor otomatis meng‑optimasi konfigurasi Vite, mem‑build assets, dan men‑set environment variables.
Dengan mengikuti langkah‑langkah di atas, Anda memiliki proyek Laravel 11 yang terintegrasi dengan Vite, TailwindCSS, Breeze, dan Sanctum—semua dalam arsitektur yang siap untuk pengembangan SPA modern maupun API microservices. Terapkan best practice seperti linting, testing, dan penggunaan queue/cache untuk menghasilkan aplikasi yang stabil, scalable, dan mudah dipelihara.
Panduan step-by-step setup Laravel 11 terbaru dengan Vite, Breeze, Sanctum, dan TailwindCSS. Termasuk instalasi, konfigurasi, contoh kode, dan best practice modern.
Laravel,PHP Framework,Web Development,Vite,Breeze,Sanctum,TailwindCSS
#Laravel #LaravelIndonesia #PHP #WebDev #Backend
.png)
