static_web_s3_template.yml

# Create an S3 Bucket that hosts a React app
# Use AWS CLI to execute the file like the below snippet
# aws cloudformation deploy --template-file ./cloudformation_basic.yml --stack-name basic --parameter-overrides BucketName=<BUCKET_NAME>

AWSTemplateFormatVersion: 2010-09-09

Parameters: # params passed to "--parameter-overrides" in CLI
  BucketName:
    Description: Unique name for your bucket. This will be in the S3 url to your React app.
    Type: String

Resources:
  # Create an S3 Bucket that serves a static website (i.e. React app)
  MyBucket:
    Type: AWS::S3::Bucket
    Properties:
      BucketName: !Ref BucketName
      #AccessControl: PublicRead # visitors need to be able to access the sie
      PublicAccessBlockConfiguration:
        BlockPublicAcls: false
      OwnershipControls:
        Rules:
          - ObjectOwnership: ObjectWriter
      WebsiteConfiguration: # this makes the S3 Bucket a static website/app
        IndexDocument: index.html # default object served when visiting S3 domain
        ErrorDocument: index.html # just send to app, let React handle errors and routing

  # Add a Bucket Policy that lets public visitors access the web app
  MyBucketPolicy:
    Type: AWS::S3::BucketPolicy
    Properties:
      Bucket: !Ref MyBucket # attach to bucket being created
      PolicyDocument:
        Id: MyPolicy
        Version: 2012-10-17
        Statement: # lets the public access/view the contents of your Bucket, i.e. web app
          - Sid: PublicReadForGetBucketObjects
            Effect: Allow
            Principal: '*' # wildcard, allow all requests
            Action: 's3:GetObject'
            Resource: !Join ['', ['arn:aws:s3:::', !Ref MyBucket, /*]]

Outputs:
  WebsiteURL:
    Value: !GetAtt MyBucket.WebsiteURL
    Description: URL for website hosted on S3