React AWS Pipeline

A production-ready React application with automated AWS CI/CD pipeline deployment using Infrastructure as Code.

Table of Contents

• Project Overview
• Technologies Used
• Getting Started
• Deployment to AWS
• Project Structure
• Infrastructure Components
• Troubleshooting
• Contributing

Project Overview

This project demonstrates a modern, scalable setup for deploying React applications to AWS with fully automated CI/CD pipelines. The infrastructure is provisioned and managed using Terraform, ensuring reproducible and version-controlled deployments.

Architecture

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   Source Code   │───▶│ AWS CodePipeline │───▶│  AWS CodeBuild  │
│   (GitHub)      │    │                  │    │                 │
└─────────────────┘    └──────────────────┘    └─────────────────┘
                                                          │
                                                          ▼
┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│ AWS CloudFront  │◀───│     AWS S3       │◀───│   Build Output  │
│      (CDN)      │    │   (Static Host)  │    │                 │
└─────────────────┘    └──────────────────┘    └─────────────────┘

AWS Architectures

Expanded AWS Architectures

AWS Services Used

• AWS CodePipeline: Orchestrates the entire CI/CD workflow
• AWS CodeBuild: Compiles and builds the React application
• AWS S3: Hosts static website files with optimized configurations
• AWS CloudFront: Global CDN for fast content delivery and security
• AWS CloudWatch: Monitoring and logging for pipeline and infrastructure
• Terraform: Infrastructure as Code for reproducible deployments

Technologies Used

Frontend Stack

• React ^19.2.0 - Modern React with latest features
• TypeScript ~5.9.3 - Type-safe JavaScript development
• Vite ^7.2.4 - Fast build tool and development server
• ESLint - Code linting and formatting

Infrastructure & CI/CD

• Terraform - Infrastructure as Code
• AWS CodePipeline - Continuous Integration/Deployment
• AWS CodeBuild - Build automation
• buildspec.yml - Build configuration

Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v20+ recommended) - Download here
• npm (comes with Node.js) or pnpm or yarn
• AWS CLI configured with appropriate credentials - Installation guide
• Terraform CLI (v1.0+ recommended) - Installation guide
• Git for version control

AWS Prerequisites

1. AWS Account with sufficient permissions for:

   • S3 bucket creation and management
   • CloudFront distribution creation
   • CodePipeline and CodeBuild setup
   • IAM role creation

2. Configure AWS CLI:

   aws configure

   Enter your AWS Access Key ID, Secret Access Key, and preferred region.

Local Development

1. Clone the Repository:

   git clone <your-repo-url>
   cd react-aws-pipeline

2. Install Dependencies:

   npm install

3. Start Development Server:

   npm run dev

   Application will be available at http://localhost:5173

4. Build for Production (optional):

   npm run build

5. Lint Code (optional):

   npm run lint

Deployment to AWS

The deployment is fully automated using AWS CodePipeline, which is provisioned and managed by Terraform. Follow these steps to set up your production environment:

Step 1: Configure Terraform Variables

1. Navigate to Terraform Directory:

   cd terraform

2. Create Your Variables File:

   cp example.terraform.tfvars terraform.tfvars

3. Edit terraform.tfvars with your specific configurations:

   # Example configuration
   project_name = "my-react-app"
   environment  = "production"
   aws_region   = "us-east-1"
   
   # GitHub connection (adjust as needed)
   github_owner      = "your-github-username"
   github_repository = "react-aws-pipeline"
   github_branch     = "main"

Step 2: Deploy Infrastructure

1. Initialize Terraform:

   terraform init

2. Review the Plan:

   terraform plan

   Review the proposed changes carefully before proceeding.

3. Apply Infrastructure:

   terraform apply

   Type yes when prompted to confirm the deployment.

Step 3: Connect to Source Repository

After Terraform completes:

1. The CodePipeline will be created but may need manual connection to your GitHub repository
2. Navigate to AWS CodePipeline console and authorize the GitHub connection
3. Alternatively, ensure your GitHub repository has the correct webhook configured

Step 4: Trigger Deployment

That's it! Any push to the main branch will now:

1. Trigger AWS CodePipeline automatically
2. Run CodeBuild to compile your React app
3. Deploy the built assets to S3
4. Invalidate CloudFront cache for immediate updates
5. Make your app available via the CloudFront URL

Monitoring Deployment

Monitor your deployment through:

• AWS CodePipeline Console: Track pipeline execution status
• AWS CodeBuild Console: View build logs and details
• AWS CloudWatch: Monitor metrics and logs
• CloudFront Console: Check distribution status and cache

Cost Estimation

Estimated monthly AWS costs for this setup (US East region):

• S3 Storage: $1-5 (depending on content size)
• CloudFront: $0.50-10 (based on traffic)
• CodePipeline: $1 per active pipeline
• CodeBuild: $0.005 per build minute
• Lambda: Minimal cost (usually under $1)

Total estimated cost: $5-20/month for typical usage

Project Structure

react-aws-pipeline/
├── src/                      # React application source code
│   ├── assets/              # Images, fonts, and other assets
│   │   └── react.svg
│   ├── App.css
│   ├── App.tsx              # Main application component
│   ├── index.css
│   └── main.tsx             # Application entry point
├── public/                   # Static assets served directly
│   └── vite.svg
├── terraform/                # Infrastructure as Code
│   ├── .gitignore
│   ├── cloudfront.tf        # CloudFront CDN configuration
│   ├── cloudwatch.tf        # Monitoring and logging
│   ├── codebuild.tf         # Build environment setup
│   ├── codepipeline.tf      # CI/CD pipeline configuration
│   ├── connector.tf         # GitHub connection setup
│   ├── create_lambda_package.sh
│   ├── data.tf
│   ├── example.terraform.tfvars  # Example configuration
│   ├── iam.tf               # IAM roles and policies
│   ├── lambda_function.py
│   ├── lambda_invalidation.zip
│   ├── lambda.tf
│   ├── main.tf
│   ├── outputs.tf
│   ├── s3.tf
│   ├── .terraform/
│   └── variables.tf
├── apply-terraform.sh
├── buildspec.yml             # CodeBuild build specification
├── destroy-resources.sh
├── eslint.config.js          # ESLint code quality rules
├── package-lock.json
├── package.json              # Node.js dependencies and scripts
├── tsconfig.app.json
├── tsconfig.json             # TypeScript configuration
├── tsconfig.node.json
└── vite.config.ts            # Vite build configuration

Available Scripts

Script	Description
npm run dev	Starts the development server with hot reload
npm run build	Builds the production-ready application
npm run lint	Runs ESLint to check code quality
npm run preview	Previews the built application locally

Environment URLs

After deployment, you'll have access to:

• Development: http://localhost:5173 (local)
• Production: CloudFront distribution URL (provided by Terraform output)
• S3 Direct: S3 bucket website endpoint (not recommended for production traffic)

Infrastructure Components

AWS CodePipeline Stages

1. Source: Pulls code from GitHub repository
2. Build: Compiles React app using CodeBuild
3. Deploy: Uploads built files to S3 bucket

Security Features

• HTTPS enforced via CloudFront
• CORS configured for secure cross-origin requests
• CloudFront security headers
• IAM least-privilege access policies

Troubleshooting

Common Issues

Pipeline Fails at Build Stage

• Check Node.js version compatibility in buildspec.yml
• Verify all dependencies are listed in package.json
• Review CodeBuild logs in AWS console

CloudFront Not Updating

• CloudFront uses edge caching (can take 5-15 minutes)
• Check if cache invalidation is configured
• Use browser incognito mode to test

Terraform Apply Fails

• Ensure AWS credentials are properly configured
• Check if resource names are unique globally (S3 buckets)
• Verify required AWS permissions are available

Build Command Not Found

• Make sure npm run build works locally first
• Check if TypeScript compilation passes: npm run build
• Verify all dependencies are installed: npm ci

Additional Resources

• AWS CodePipeline Documentation
• Terraform AWS Provider
• Vite Documentation
• React Documentation
• AWS CloudFront Best Practices

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Commit changes: git commit -am 'Add new feature'
4. Push to branch: git push origin feature-name
5. Submit a Pull Request

License

This project is licensed under the MIT License. See the LICENSE file for details.