VueSymfonyBoilerplate (VSB)

VueSymfonyBoilerplate (VSB) is a production-ready foundation for building modern web applications with a strict separation between frontend and backend. Unlike traditional Symfony-UI integrations, this boilerplate features:

• 🧩 Fully decoupled architecture: Vue 3 frontend and Symfony 7 API operate as independent services
• 🔄 API-first design: Clean RESTful communication between layers
• 🚀 Modern development experience: Bun runtime + TypeScript + Hot Module Replacement
• 🔒 Enterprise-ready security: Pre-configured JWT authentication with refresh tokens
• 📦 Zero-config Docker setup: Includes PostgreSQL, Nginx reverse proxy, and Adminer

Perfect for teams implementing microservices architecture or developers wanting complete control over frontend/backend boundaries.

---

🚀 Key Features

• Decoupled Architecture: Independent frontend/backend services communicating via API
• Modern Frontend Stack: Vue 3 + TypeScript + Pinia + TailwindCSS
• Robust Backend: Symfony 7 + Doctrine ORM + PostgreSQL
• Production-Ready Setup: Dockerized environment with Nginx reverse proxy
• JWT Authentication: Pre-configured with refresh token support
• Bun Runtime: Faster JavaScript tooling

📂 Project Structure

VueSymfonyBoilerplate/
├── backend/            # Symfony 7 API application
├── frontend/           # Vue 3 + TypeScript frontend
├── .docker/            # Docker configurations
│   ├── backend/
│   └── nginx/
├── docker-compose.yaml # Main Docker configuration

🛠️ Tech Stack

Component	Technology
Frontend	Vue 3, TypeScript, Axios, Pinia, Vue-Router, Tailwind
Backend	Symfony 7, Doctrine ORM, PHP 8.3
Database	PostgreSQL
Runtime	Bun (Frontend), PHP-FPM (Backend)
Auth	JWT + Refresh Tokens
Infra	Docker, Nginx Reverse Proxy

⚙️ Prerequisites

• Docker & Docker Compose
• (Optional) Symfony CLI for local development

🏁 Getting Started

1. Start the Application

docker-compose up --build

2. Access Services

Service	URL
Frontend	http://localhost:3000
Backend API	http://localhost:3000/api
Adminer (DB GUI)	http://localhost:3000/adminer

🔐 Authentication Setup

1. Generate JWT Keys

docker exec -it vsb-backend php bin/console lexik:jwt:generate-keypair

2. Run Database Migrations

docker exec -it vsb-backend php bin/console doctrine:migrations:migrate

Demo Available: Authentication demo at /demo route

🐳 Common Docker Commands

Backend Operations

# Clear Symfony cache
docker exec -it vsb-backend php bin/console cache:clear

# Install dependencies
docker exec -it vsb-backend composer install

# Run new migration
docker exec -it vsb-backend php bin/console make:migration

Frontend Operations

# Install packages
docker exec -it vsb-frontend bun install

# Start dev server
docker exec -it vsb-frontend bun dev

# Build for production
docker exec -it vsb-frontend bun build

🔄 Reverse Proxy Configuration

Pre-configured Nginx handles:

• Frontend routing (/)
• Backend API routing (/api)
• Static assets serving
• CORS headers management

📜 License

MIT License - See LICENSE file for details