AWS Full Stack Application

A modern full-stack application built with Vue 3, TypeScript, PrimeVue, Python (FastAPI), and AWS CDK.

Project Structure

AwsFullstack/
├── frontend/           # Vue 3 + TypeScript + PrimeVue frontend
├── backend/            # Python FastAPI backend
├── infrastructure/     # AWS CDK infrastructure as code
└── README.md

Tech Stack

Frontend

• Vue 3 - Progressive JavaScript framework
• TypeScript - Type-safe JavaScript
• PrimeVue - Rich UI component library
• Vite - Fast build tool

Backend

• FastAPI - Modern Python web framework
• Pydantic - Data validation
• Mangum - AWS Lambda ASGI adapter
• Boto3 - AWS SDK for Python

Infrastructure

• AWS CDK - Infrastructure as Code
• Lambda - Serverless compute
• API Gateway - REST API management
• S3 - Static website hosting
• CloudFront - Content delivery network

Prerequisites

For Docker Development (Recommended)

• Docker and Docker Compose

For Local Development (Alternative)

• Node.js 18+ and npm
• Python 3.11+ and pip
• AWS CLI configured with credentials
• AWS CDK CLI: npm install -g aws-cdk

Quick Start with Docker

Run both frontend and backend with a single command:

docker-compose up

This will start:

• Frontend at http://localhost:5173
• Backend API at http://localhost:8000
• API Documentation at http://localhost:8000/docs

To rebuild after changes:

docker-compose up --build

To stop the services:

docker-compose down

Local Development Setup (Without Docker)

1. Frontend Setup

cd frontend
npm install
npm run dev

The frontend will be available at http://localhost:5173

2. Backend Setup

Create and activate virtual environment:

cd backend
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate
pip install -r requirements.txt

Run the development server:

python main.py

The API will be available at http://localhost:8000

API documentation: http://localhost:8000/docs

3. Infrastructure Setup

cd infrastructure
npm install

Deployment

Build Frontend

cd frontend
npm run build

Bootstrap AWS CDK (First time only)

cd infrastructure
cdk bootstrap

Deploy to AWS

cd infrastructure
npm run deploy

This will:

1. Package the Python backend as a Lambda function
2. Deploy the frontend to S3
3. Set up CloudFront distribution
4. Create API Gateway endpoints
5. Output the URLs for your application

View CloudFormation Changes

cd infrastructure
npm run diff

Destroy Infrastructure

cd infrastructure
npm run destroy

Environment Configuration

Backend Environment Variables

Create a .env file in the backend/ directory:

ENVIRONMENT=development
AWS_REGION=us-east-1

Frontend Environment Variables

Create a .env file in the frontend/ directory:

VITE_API_URL=http://localhost:8000

For production, update with your API Gateway URL after deployment.

Available Scripts

Frontend

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build

Backend

• python main.py - Start development server
• pip freeze > requirements.txt - Export pip dependencies

Docker

• docker-compose up - Start all services
• docker-compose up --build - Rebuild and start services
• docker-compose down - Stop all services
• docker-compose logs -f - View logs
• docker-compose ps - View running containers

Infrastructure

• npm run synth - Synthesize CloudFormation template
• npm run deploy - Deploy to AWS
• npm run diff - Compare deployed stack with current state
• npm run destroy - Destroy all AWS resources

Development Workflow

Using Docker (Recommended)

1. Start services: docker-compose up
2. Make changes to frontend or backend code (hot-reload enabled)
3. Test changes at http://localhost:5173 (frontend) and http://localhost:8000 (backend)
4. When ready to deploy:
   • Build frontend: cd frontend && npm run build
   • Deploy: cd infrastructure && npm run deploy

Security Notes

• The CORS configuration in backend/main.py allows all origins for development. Update for production.
• Configure proper IAM roles and policies for Lambda functions
• Use environment variables for sensitive data
• Enable CloudFront access logging for production
• Consider adding API authentication (API keys, Cognito, etc.)