Setup Laravel 11 dengan Best Practice Modern: Vite, Breeze, Sanctum, dan TailwindCSS

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-app

Penjelasan

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 dev

Penjelasan

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 -p

Sesuaikan 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 dev

Jika 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 migrate

Tambah 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=secret

Jalankan migrasi:

php artisan migrate

Penjelasan

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.testing untuk CI/CD.
• Laravel Pint & PHPStan: composer require laravel/pint --dev dan composer require phpstan/phpstan --dev untuk kode standar.
• Feature testing: gunakan php artisan test dengan RefreshDatabase trait.
• Cache configuration: aktifkan Redis pada CACHE_DRIVER=redis untuk produksi.
• Queue driver: gunakan QUEUE_CONNECTION=database atau redis untuk job async.

10. Deploy ke Production (contoh dengan Laravel Vapor)

1. Instal CLI Vapor: composer require laravel/vapor-cli --dev
2. Login: vapor login
3. 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