Posted on Jul 9 Hello everyone! I hope that you are doing great on this fine weekend😀Previously, I built a face recognition tool for celebrities where I deployed its back-end to AWS using AWS CDK.The link for the article can be found here: https://dev.to/alizgheib/build-a-face-recognition-tool-for-celebrities-using-react-aws-fooToday, I'll be deploying the front-end part (React application) to Amazon Simple Storage Service (S3) while adding a caching solution using AWS Cloudfront - So let's do it together!I thought that it would be pretty useful to outline our process into steps so that it would be easier for you to follow along.Build/Deployment Outline:Step By Step Guide:If you would like to follow along, feel free to use the codebase available here: https://github.com/AliZgheib/celebrities-face-recognition/tree/main/front-endNow let's start:First of all, there's a small issue that I faced when accessing the deployed application (a blank page kept on showing)To fix that, we just need to add "homepage": "." in the package.json file. the package.json should look as follow:Now let's create a production build of the applicationWe cd into the project directoryWe create a production build by running the NPM command below:After a successful run we should have a build folder similar to the one below:Now let's login to the AWS Console and Navigate to the AWS S3 service page.We click on the "Create bucket" button to create an S3 Bucket that will host our React application codeWe name our s3 bucket (ex: celebrities-face-recognition - it should be globally unique) and we click the "Create bucket" button at the bottom without the need to modify any other options.We should see something similar to the image below:Now let's upload the previously created production build to the S3 bucket.We click on celebrities-face-recognition (the name of the bucket you created) and we click on “Upload”.We upload the files (index.html, favicon.ico, asset-manifest.json, robots.txt) and the static folder separately and at the end, we should have something similar to the list below ready to be uploaded:Now we click the "Upload" button at the bottom of the page and after waiting a couple of moments, our project should be successfully uploaded.Great progress if you are still following along!The setup for our S3 bucket is partially ready. We have to add a caching solution to our S3 bucket and expose our website to the web (via AWS CloudFront) and finally, we go back to S3 to update the permissions.Let's navigate to the AWS CloudFront service and click on the "Create a CloudFront distribution" button to create a new distribution.1- We pick celebrities-face-recognition.s3.us-east-1.amazonaws.com for the Origin domain option2- Now for the Origin access option:2.a- Let's change it from "Public" to "Origin access control settings (recommended)" - OAC is the newer and recommended approach to access your S3 bucket from AWS CloudFront.b- Click "Create control setting"c- Click "Create"3- For the WAF option: pick whatever fits your needs. For my case, I'll go ahead and disable it4- For the Default root object, we enter "index.html" as our default object5- We click "Create distribution" to create our distribution.that's it for CloudFront, our distribution is now being deployed globally and you should see a screen similar to the one below:You can see the distribution domain name: https://d3b1yxs153bxzh.cloudfront.net However, if we try to access it, we will get an error because S3 is not allowing our CloudFront distribution to access it - let's change that!Let's copy the new S3 bucket policy by clicking the "Copy Policy" button at the top right of the screen.We navigate back to the AWS S3 service and we open the "permissions" section of our celebrities-face-recognition bucket.1- Click the "Edit" button in the "Block public access (bucket settings)" section and make sure to untick all the options then click "Save changes".2- Click the "Edit" button in the "Bucket policy" section and paste the previously copied CloudFront permissions here then click "Save changes".Guess what? The distribution is working now 😀 and can be accessed globally at minimal latency - https://d3b1yxs153bxzh.cloudfront.net.You can go a bit further and link the distribution URL to your domain (ex: https://www.example.com) using a DNS provider like GoDaddy, Name Cheap, Route 53, etc.. but that would be outside the scope of this article.Please note that the distribution created is for education purposes only and it will be taken down before publishing the article. Use it as a guide to create and publish your distributions.Thank you for sticking with me till the end and I would appreciate any feedback in the comments section below.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Suraj Vishwakarma - Jun 15 martin rojas - May 30 Peter McAree - Jul 2 alakkadshaw - Jun 2 Once suspended, alizgheib will not be able to comment or publish posts until their suspension is removed. Once unsuspended, alizgheib will be able to comment and publish posts again. Once unpublished, all posts by alizgheib will become hidden and only accessible to themselves. If alizgheib is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Ali Zgheib. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag alizgheib: alizgheib consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging alizgheib will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.