Does this tool deploy the code for me?

No, it generates the configuration files. You must run them via your own AWS account.

What is the recommended approach?

Terraform is ideal for long-term infrastructure management, while GitHub Actions is perfect for automated deployments.

Is this template production-ready?

Yes, the templates follow AWS best practices for S3 static hosting and CloudFront CDN distribution.

React2AWS Generator

Generate infrastructure templates to host React apps on AWS S3 and CloudFront.

Project Settings

App Name

S3 Bucket Name

S3 Bucket names must be globally unique.

AWS Region

Environment Tags

TERRAFORM Template

terraform {
  required_providers {
    aws = {
      source  = "hashicorp/aws"
      version = ">= 5.0"
    }
  }
}

provider "aws" {
  region = "us-east-1"
}

# S3 Bucket for hosting React App
resource "aws_s3_bucket" "hosting_bucket" {
  bucket = "my-react-app-production"
}

resource "aws_s3_bucket_ownership_controls" "hosting_bucket_ownership" {
  bucket = aws_s3_bucket.hosting_bucket.id
  rule {
    object_ownership = "BucketOwnerEnforced"
  }
}

resource "aws_s3_bucket_public_access_block" "hosting_bucket_public_access" {
  bucket = aws_s3_bucket.hosting_bucket.id

  block_public_acls       = false
  block_public_policy     = false
  ignore_public_acls      = false
  restrict_public_buckets = false
}

resource "aws_s3_bucket_website_configuration" "hosting_bucket_website" {
  bucket = aws_s3_bucket.hosting_bucket.id

  index_document {
    suffix = "index.html"
  }
  error_document {
    key = "index.html"
  }
}

resource "aws_s3_bucket_policy" "allow_public_read" {
  bucket = aws_s3_bucket.hosting_bucket.id
  policy = jsonencode({
    Version = "2012-10-17"
    Statement = [
      {
        Sid       = "PublicReadGetObject"
        Effect    = "Allow"
        Principal = "*"
        Action    = "s3:GetObject"
        Resource  = "${aws_s3_bucket.hosting_bucket.arn}/*"
      },
    ]
  })
  depends_on = [aws_s3_bucket_public_access_block.hosting_bucket_public_access]
}

# CloudFront Distribution
locals {
  s3_origin_id = "myS3Origin"
}

resource "aws_cloudfront_distribution" "s3_distribution" {
  origin {
    domain_name              = aws_s3_bucket_website_configuration.hosting_bucket_website.website_endpoint
    origin_id                = local.s3_origin_id
    custom_origin_config {
      http_port              = 80
      https_port             = 443
      origin_protocol_policy = "http-only"
      origin_ssl_protocols   = ["TLSv1", "TLSv1.1", "TLSv1.2"]
    }
  }

  enabled             = true
  is_ipv6_enabled     = true
  default_root_object = "index.html"

  default_cache_behavior {
    allowed_methods  = ["GET", "HEAD"]
    cached_methods   = ["GET", "HEAD"]
    target_origin_id = local.s3_origin_id

    forwarded_values {
      query_string = false
      cookies {
        forward = "none"
      }
    }

    viewer_protocol_policy = "redirect-to-https"
    min_ttl                = 0
    default_ttl            = 3600
    max_ttl                = 86400
  }

  custom_error_response {
    error_code            = 404
    response_code         = 200
    response_page_path    = "/index.html"
    error_caching_min_ttl = 10
  }

  restrictions {
    geo_restriction {
      restriction_type = "none"
    }
  }

  viewer_certificate {
    cloudfront_default_certificate = true
  }

  tags = {
    Environment = "production"
    Project     = "my-react-app"
  }
}

output "cloudfront_domain" {
  value = aws_cloudfront_distribution.s3_distribution.domain_name
}

How to deploy React to AWS using S3 and CloudFront

Generate professional cloud infrastructure templates for your React projects in seconds.

Configure Project

Enter your app name, preferred S3 bucket name, and AWS region.

Choose Tool

Select between Terraform (IaC), AWS CLI (Script) or GitHub Actions (CI/CD).

Generate

The code updates automatically as you configure.

Copy & Use

Copy the generated code and paste it into your project files.

Frequently Asked Questions

Related Tools

JSON Formatter

Syntax Converter

Rich Text to HTML

Accessible to All

Essential productivity tools should be free and available to everyone.

Simple & Clean

Minimalist interface designed for a focused and productive experience.

Lightning Fast

No server queues or upload wait times. Instant results in your browser.

SECURE & LOCAL

100% Local Processing

Your files never leave your device. All processing happens directly in your browser to ensure absolute security.

Support the Project

Buy me a coffee