React APP Deploy in S3 using CloudFormation & AWS CLI

prerequisite

i. Install and configure AWS CLI

Deploy React APP

1. Create an S3 Bucket for Your React App:

Resources:
  StaticAppBucket:
    Type: AWS::S3::Bucket
    Properties:
      BucketName: SampleReactApp

2.Upload Your React App to the S3 Bucket:

We can deploy the App using the any one of the following Tools

i. AWS CLI

ii. AWS Management Console

iii.Deployment script

3. Cloud Front Distribution:

Resources:
  CloudFrontDistribution:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        Origins:
          - Id: S3Origin
            DomainName: !GetAtt StaticAppBucket.RegionalDomainName
            S3OriginConfig:
              OriginAccessIdentity: ''
        Enabled: true
        DefaultRootObject: index.html
        DefaultCacheBehavior:
          TargetOriginId: S3Origin
          ViewerProtocolPolicy: redirect-to-https
          ForwardedValues:
            QueryString: 'false'
        ViewerCertificate:
          CloudFrontDefaultCertificate: true

4. Deploy Your CloudFormation Stack:

You can deploy the CloudFormation template using the AWS Management Console, AWS CLI, or an SDK.

Example using AWS CLI:

aws cloudformation create-stack --stack-name staticApp --template-body 
file://static-app-cloudformation.yaml

5.Access Your React App:

Once the stack is created, you can find the CloudFront distribution domain name in the CloudFormation outputs. Access your React app using the CloudFront domain name.