AWS Serving file as gzip from S3 via Cloudfront

Sometimes when the official documentation is not clear enough you run in circles to check and recheck every step as defined, but occasionally it still does not work. I was in such a scenario yesterday, so I just added this hint quick steps in case its helpful for anyone.

Serving unzipped file as gzip from S3 via Cloudfront seems straight forward as changing the Cloudfront Distribution Behavior setting of Compress Objects Automatically from No to Yes. Still the javascript files were not being served as gzip in my browser, digging around further found that Cloudfront expects a Content-Length and Content-Type to be defined in your origin, which was S3 bucket in my case. Below are steps needed to succesfully serve a non zipped file as gzip from your s3 bucket.

• Select CloudFront distribution and goto "Default Cache Behavior Settings" then change "Compress Objects Automatically" to Yes
  
• Next goto S3 Bucket and select Permissions - CORS Configuration within your Bucket. Add AllowedHeader Content-Length as shown below inside within <CORSConfiguration> tag

    <AllowedHeader>Content-Length</AllowedHeader>

• Within each file that needs to be compressed within S3 you need to provide the Content-Type as a valid AWS accepted format AWS Cloudfront Filetypes
• Finally you need to invalidate the files so that changes go thru for all the locations