Ikuti tutorial step‑by‑step ini untuk menginstal Laravel 11 terbaru, mengonfigurasi Vite, Breeze, Sanctum, serta Tailwind CSS sehingga proyek siap produksi dengan standar keamanan dan performa terkini.
1. Prasyarat
- PHP >= 8.2
- Composer 2.x
- Node.js >= 20 & npm atau Yarn
- Database MySQL/PostgreSQL/SQLite
2. Instalasi Laravel 11
composer create-project laravel/laravel my-app "11.*"Masuk ke direktori proyek:
cd my-app2.1. Validasi Instalasi
php artisan --versionOutput harus menampilkan Laravel Framework 11.x.x.
3. Setup Frontend dengan Vite & Tailwind CSS
3.1. Install dependensi npm
npm install3.2. Tambahkan Tailwind CSS
npm install -D tailwindcss@latest postcss@latest autoprefixer@latestInisialisasi konfigurasi Tailwind:
npx tailwindcss init -pUbah tailwind.config.js:
module.exports = {
content: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
theme: {
extend: {},
},
plugins: [],
};Update resources/css/app.css:
@tailwind base;
@tailwind components;
@tailwind utilities;3.3. Konfigurasi Vite
File vite.config.js yang di‑generate Laravel sudah siap. Pastikan ada plugin Laravel Vite:
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,
}),
],
});3.4. Jalankan dev server
npm run devVite akan meng‑compile asset dan hot‑reload.
4. Instalasi Laravel Breeze (Starter Kit)
composer require laravel/breeze --devGenerate scaffolding dengan Tailwind & Vite:
php artisan breeze:install vueJika ingin menggunakan Blade saja, ganti vue dengan blade.
Install kembali npm dependencies yang diperlukan Breeze:
npm install && npm run dev5. Menambahkan Laravel Sanctum untuk API Authentication
5.1. Install Sanctum
composer require laravel/sanctum5.2. Publish konfigurasi & migrasi
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate5.3. Konfigurasi Middleware
Tambahkan EnsureFrontendRequestsAreStateful::class pada api middleware group di app/Http/Kernel.php:
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,5.4. Menggunakan Token Personal Access
Contoh route untuk login API:
use Illuminate\Http\Request;
use App\Models\User;
Route::post('/api/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('api-token')->plainTextToken;
return response()->json(['token' => $token]);
});5.5. Melindungi Route API
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
return $request->user();
});6. Best Practice Modern
- Environment Variables: Simpan kunci rahasia di
.env(APP_KEY, SANCTUM_STATEFUL_DOMAINS, SESSION_DOMAIN). - Cache Config & Routes: Pada production jalankan
php artisan config:cachedanphp artisan route:cache. - Optimized Autoload:
composer install --optimize-autoloader --no-dev. - HTTPS & Secure Cookies: Set
SESSION_SECURE_COOKIE=truedanSANCTUM_COOKIE_SECURE=truedi .env. - Static Asset Versioning: Vite sudah menambahkan hash pada nama file, cukup pastikan
mix()diganti denganvite()di Blade. - Testing: Gunakan Pest atau PHPUnit; contoh:
php artisan test.
7. Deploy ke Production (Contoh di Laravel Forge/VPS)
- Clone repo,
git pull - Install PHP dependencies:
composer install --no-dev --optimize-autoloader - Install Node assets:
npm ci && npm run build - Set permission:
chmod -R 775 storage bootstrap/cache - Jalankan migrasi & cache:
php artisan migrate --force && php artisan config:cache && php artisan route:cache && php artisan view:cache - Restart queue & supervisor jika ada.
Setelah semua langkah selesai, aplikasi Laravel 11 siap melayani traffic dengan stack modern.
Dengan mengikuti tutorial ini, Anda berhasil men-setup Laravel 11 menggunakan Vite, Tailwind, Breeze, dan Sanctum—semua dalam satu rangkaian yang mengikuti best practice 2026. Stack modern ini memberikan kecepatan pengembangan, keamanan API, dan performa front‑end yang optimal, siap untuk skala produksi maupun proyek starter.
Panduan lengkap instalasi Laravel 11 dengan Vite, Breeze, Sanctum, Tailwind CSS, dan best practice modern untuk pengembangan web 2026.
Laravel,PHP Framework,Web Development
#Laravel #LaravelIndonesia #PHP #WebDev #Backend
.png)
