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

Panduan lengkap langkah demi langkah menyiapkan proyek Laravel terbaru (v10) menggunakan Vite, Breeze, Sanctum, dan TailwindCSS untuk pengembangan aplikasi web modern.

1. Persyaratan Sistem

Pastikan Anda memiliki:

• PHP >= 8.2
• Composer terbaru
• Node.js >= 18 & npm
• Database MySQL atau PostgreSQL

2. Instalasi Laravel

2.1 Buat proyek baru

composer create-project laravel/laravel my-app "10.*"

Perintah di atas mengunduh Laravel 10 stabil.

2.2 Masuk ke direktori proyek

cd my-app

3. Setup Frontend Modern dengan Vite & TailwindCSS

3.1 Install dependensi Node

npm install

3.2 Tambahkan TailwindCSS

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

Edit tailwind.config.js:

module.exports = {
    content: [
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

Tambahkan Tailwind directives ke resources/css/app.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

3.3 Build asset dengan Vite

npm run dev

Server Vite akan berjalan pada http://localhost:5173 dan otomatis ter‑integrasi dengan Laravel Mix‑like Blade directive @vite.

4. Instalasi Laravel Breeze (Starter Kit)

4.1 Install paket Breeze

composer require laravel/breeze --dev

4.2 Jalankan scaffolding dengan Vite & Tailwind

php artisan breeze:install vue

Anda dapat memilih blade, react, atau vue. Pada contoh ini dipilih Vue+Vite.

4.3 Instalasi dependensi front-end Breeze

npm install && npm run dev

5. Tambahkan Laravel Sanctum untuk API Authentication

5.1 Install Sanctum

composer require laravel/sanctum

5.2 Publikasi konfigurasi & migrasi

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate

5.3 Konfigurasi middleware

Tambahkan EnsureFrontendRequestsAreStateful::class ke grup api di app/Http/Kernel.php:

'api' => [
    \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
    'throttle:api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],

5.4 Contoh endpoint login menggunakan Sanctum

use Illuminate\Http\Request;
use App\Models\User;

Route::post('/login', function (Request $request) {
    $credentials = $request->only('email', 'password');
    if (!auth()->attempt($credentials)) {
        return response()->json(['message' => 'Invalid credentials'], 401);
    }
    $request->session()->regenerate();
    return response()->json(['message' => 'Logged in']);
});

Route::post('/logout', function (Request $request) {
    auth()->logout();
    $request->session()->invalidate();
    $request->session()->regenerateToken();
    return response()->json(['message' => 'Logged out']);
});

6. Konfigurasi Environment

6.1 .env utama

APP_NAME="MyApp"
APP_ENV=local
APP_KEY=base64:GENERATE_WITH_php artisan key:generate
APP_DEBUG=true
APP_URL=http://localhost

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=my_app_db
DB_USERNAME=root
DB_PASSWORD=

SANCTUM_STATEFUL_DOMAINS=localhost,127.0.0.1
SESSION_DOMAIN=localhost
COOKIE_DOMAIN=localhost

7. Best Practice Modern

• Environment segregation: gunakan .env.testing untuk CI.
• Static analysis: instal phpstan atau larastan via Composer.
• Feature tests: gunakan makesHttpRequests dengan Sanctum token.
• Cache config & routes dalam production: php artisan config:cache & php artisan route:cache.
• Deploy dengan Docker: buat Dockerfile berbasis php:8.2-fpm-alpine dan gunakan docker‑compose untuk Nginx + MySQL + Redis.

8. Menjalankan Aplikasi

# Backend
php artisan serve

# Frontend (Vite)
npm run dev

Akses http://localhost:8000 untuk melihat halaman Breeze dan gunakan endpoint /api/user yang dilindungi Sanctum untuk menguji token.

Dengan mengikuti langkah‑langkah di atas, Anda kini memiliki proyek Laravel 10 yang siap production, memanfaatkan stack modern Vite, TailwindCSS, Breeze starter kit, serta autentikasi API stateless melalui Sanctum. Terapkan best practice seperti caching, testing, dan containerization untuk meningkatkan keamanan dan performa aplikasi Anda.

---

Panduan lengkap setup Laravel 10 dengan Vite, Breeze, Sanctum, dan TailwindCSS. Langkah demi langkah, contoh kode, konfigurasi, dan best practice modern untuk pengembangan web dengan Laravel.

Laravel,PHP Framework,Web Development,Vite,Breeze,Sanctum,TailwindCSS

#Laravel #LaravelIndonesia #PHP #WebDev #Backend