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-app3. Setup Frontend Modern dengan Vite & TailwindCSS
3.1 Install dependensi Node
npm install3.2 Tambahkan TailwindCSS
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -pEdit 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 devServer 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 --dev4.2 Jalankan scaffolding dengan Vite & Tailwind
php artisan breeze:install vueAnda dapat memilih blade, react, atau vue. Pada contoh ini dipilih Vue+Vite.
4.3 Instalasi dependensi front-end Breeze
npm install && npm run dev5. Tambahkan Laravel Sanctum untuk API Authentication
5.1 Install Sanctum
composer require laravel/sanctum5.2 Publikasi konfigurasi & migrasi
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate5.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=localhost7. Best Practice Modern
- Environment segregation: gunakan
.env.testinguntuk CI. - Static analysis: instal
phpstanataularastanvia Composer. - Feature tests: gunakan
makesHttpRequestsdengan 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-alpinedan gunakandocker‑composeuntuk Nginx + MySQL + Redis.
8. Menjalankan Aplikasi
# Backend
php artisan serve
# Frontend (Vite)
npm run devAkses 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
.png)
