Implement complete FastAPI + Vue 3 SPA boilerplate with health checks, CORS, and one-command setup

[Copilot]

This PR implements a minimal but complete FastAPI + Vue 3 SPA boilerplate for rapid application development, addressing the requirements for health check endpoints, CORS configuration, and one-command setup.

🚀 Features Implemented

FastAPI Backend

• Health Check Endpoints: Multiple endpoints for monitoring (/health, /api/health, /api/status)
• CORS Configuration: Properly configured for frontend-backend communication
• Auto Documentation: Swagger UI available at /docs and ReDoc at /redoc
• Structured Layout: Extensible project structure with separate API module

Vue 3 Frontend

• Modern SPA: Built with Vue 3 and Vite for fast development
• Real-time Status: Dashboard showing backend connectivity status
• Proxy Configuration: Seamless API communication via Vite proxy
• Responsive Design: Clean, modern UI with status indicators

One-Command Setup Options

1. Start Script: ./start.sh - Cross-platform script that installs dependencies and runs both services
2. Docker Compose: npm run dev - Containerized setup for consistent environments
3. Manual Setup: Individual commands for development flexibility

📁 Project Structure

├── backend/                 # FastAPI application
│   ├── app/
│   │   ├── main.py         # FastAPI app with health checks and CORS
│   │   └── api/            # API routes (extensible)
│   ├── requirements.txt    # Python dependencies
│   └── Dockerfile         # Backend container
├── frontend/               # Vue 3 SPA
│   ├── src/
│   │   ├── App.vue        # Main Vue component with status dashboard
│   │   └── main.js        # Vue app entry point
│   ├── package.json       # Frontend dependencies
│   ├── vite.config.js     # Vite configuration with proxy
│   └── Dockerfile         # Frontend container
├── docker-compose.yml     # One-command setup
├── package.json           # Root scripts for convenience
└── start.sh               # Cross-platform start script

🧪 Tested & Verified

• ✅ Backend health endpoints working correctly
• ✅ Frontend successfully connects to backend APIs
• ✅ CORS properly configured for cross-origin requests
• ✅ Start script installs dependencies and runs both services
• ✅ Vite proxy correctly forwards API requests to backend
• ✅ Docker Compose setup functional

🖼️ Screenshot

The dashboard shows real-time connectivity status between frontend and backend, with all health check endpoints listed and accessible.

📖 Usage

Users can now get started with three simple commands:

git clone https://github.com/CodingCru/fastapi-vue-spa-boilerplate.git
cd fastapi-vue-spa-boilerplate
./start.sh

This provides a solid foundation for rapid development of modern web applications with FastAPI backend and Vue 3 frontend.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.