I have selected a demo React project from GitHub for this demonstration. The set up uses AWS CloudFront configured for compression and AWS S3 for hosting with 4 simple steps.
Step 1: Create an S3 Bucket and Upload the React Bundle
Step 2: Create an AWS CloudFront Distribution
Next, you can create an AWS CloudFront distribution using the AWS Console, as shown below.
There, you can select your S3 bucket as the Origin Domain Name from the drop-down. Also, keep in mind to configure Restrict Bucket Access, OAI, and Grant Read Permission on Bucket attributes as necessary. Then click on the Create Distribution button as the final step.
This step will take some time to complete. Next, select the created distribution and go to the Behaviors tab to enable the compression.
Step 3: Set Cache Policy to Brotli
You will find the default behavior, and you need to add a cache policy with Brotli compression enabled.
If you keep both options ticked, CloudFront will use Brotli compression by default if your browser supports Brotli.
Step 4: Verify the Compression Results
You can verify the results by opening the application in Chrome and visiting Chrome Network Console. There you can check the Response Headers for the content-encoding attribute value. If the value is
br then Brotli is in operation.
Please refer to my previous article on Speed Up Your Static Web Site using Gzip and CDN if you need more information about enabling static hosting or Gzip compression.