= Deploy React Apps on Amazon S3 = == 5 minute guide on how to deploy React Apps with S3 == ![ ](httpsmiro.medium.com/max/1400/1*h4TLlisFk7XvtREAsS7C7Q.jpeg) So you have completed your React app and you are looking to host it somewhere. Did you know you can use Amazon AWS S3 to host your React apps? ItâÃÂÃÂs relatively easy, low-cost and quick to deploy. = LetâÃÂÃÂs get started! = == Prerequisites == Before we go into hosting, letâÃÂÃÂs get the administrative setup done. Make sure the following are completed: **You have a AWS Account Sign up for a AWS account here: httpsaws.amazon.com/resources/create-account/ **Create a AWS User In the AWS Console, go to the IAM tab, and go to the âÃÂÃÂUsersâÃÂàsection on the sidebar. Click on âÃÂÃÂAdd UserâÃÂàand check âÃÂÃÂProgrammatic accessâÃÂÃÂ. ![ ](httpsmiro.medium.com/max/1400/1*gMtvyUQ_X2YVYHwNfLeygg.png) Click âÃÂÃÂNext: PermissionsâÃÂàand here select âÃÂÃÂAttach existing policies directlyâÃÂÃÂ. Check âÃÂÃÂAdministratorAccessâÃÂàfor the deployment purpose. ![ ](httpsmiro.medium.com/max/1400/1*UfuPz5oak9QbxX0VXlNV5g.png) Click through the Next buttons and finally click on âÃÂÃÂCreate userâÃÂÃÂ. ![ ](httpsmiro.medium.com/max/1400/1*aSCgwjWRAiNQHBV_bSRlvA.png) In the final step, we receive an Access key ID and Secret access key. Download and **save them to your computer as you will need this later == Install AWS CLI == The AWS CLI is a powerful tool which can help us simplify the deployment process. LetâÃÂÃÂs install AWS CLI using Homebrew (for macOS). Install Homebrew if you have not already. *Note: If you are using Windows, you can find the instructions on the official docs * *here* Open your terminal, and enter brew install awscli. Once the CLI tool is installed, we can configure our AWS account with aws configure. This is where you will need to enter the access key information you previously downloaded. It should something like the following. For region, you can check your URL on AWS Console and it will mention your region. For example, mine is âÃÂÃÂap-southeast-1âÃÂÃÂ. ![ ](httpsmiro.medium.com/max/1400/1*TbFgHQ9ey3SwBWtadBtqSQ.png) = Creating a React App = You might already have your React app ready to deploy. However, if you need a sample app, you can use the following options: - Generate a boilerplate React app by running npx create-react-app my-app - Download my sample React app (with a form example) from httpsgithub.com/harishv7/react-hook-form-example. This was done for a tutorial to add forms to React apps. Check it out here. Once done, make sure the dependencies are all installed using yarn install and give the app a run using yarn start. = Setup a S3 Bucket = Now that we have our sample app ready, letâÃÂÃÂs configure a S3 bucket to host our app. On AWS Console, search for âÃÂÃÂS3âÃÂàand go to S3 Dashboard. Click on âÃÂÃÂCreate bucketâÃÂàand give the bucket a name such as âÃÂÃÂmy-react-app-2021âÃÂà(or anything else you wish). *Note: The bucket name has to be unique across whole of S3. So choose a unique name which does not exist, else you will get an error!* ![ ](httpsmiro.medium.com/max/1400/1*tLDgJ0HJNEUA9DwhD5XiUw.png) Turn on public access to the bucket since we are hosting it live. ![ ](httpsmiro.medium.com/max/1400/1*Mqn0JUnqAvMMmimuLj7rTg.png) Leave the rest of the settings as what they are and click âÃÂÃÂCreate bucketâÃÂÃÂ. You will see an entry like the following on your S3 dashboard. ![ ](httpsmiro.medium.com/max/1400/1*pW6x0HIgq9WgauWy-SFIOw.png) LetâÃÂÃÂs click and go into our newly created S3 bucket. ![ ](httpsmiro.medium.com/max/1400/1*PNhe4x_fs02RmMKIQmGbng.png) LetâÃÂÃÂs click on âÃÂÃÂPropertiesâÃÂàand scroll all the way to the bottom where you will see âÃÂÃÂStatic website hostingâÃÂÃÂ. ![ ](httpsmiro.medium.com/max/1400/1*mRdXzoHrc1LHQ8Hy-2V4UQ.png) Click on âÃÂÃÂEnableâÃÂàand enter âÃÂÃÂindex.htmlâÃÂàunder Index document. ![ ](httpsmiro.medium.com/max/1400/1*3d4nQKZrRAh5SmgbL0-yhA.png) Leave the other fields the same and click on âÃÂÃÂSave changesâÃÂÃÂ. = Deploying to S3 = Now, we are ready to deploy our app to S3. The way to do that is to use the following CLI command: aws s3 sync build/ s3your-bucket-name> --acl public-read We can add this command to our package.json file too as a âÃÂÃÂdeployâÃÂàscript. ![ ](httpsmiro.medium.com/max/1400/1*BY8AO0YO7WqOUMPWA_XsVQ.png) LetâÃÂÃÂs build our app using yarn build which helps to created an optimised production build. Next, letâÃÂÃÂs run the CLI command given above or if you have setup your publish script in package.json, we can use yarn deploy. ![ ](httpsmiro.medium.com/max/1400/1*8ZbQ49dzPzGo_TkYh3_H1w.png) ThatâÃÂÃÂs it, our app is now deployed! To find where our app is hosted (the website link), go to AWS S3 console and click on the bucket you created. Go to the âÃÂÃÂPropertiesâÃÂàtab and scroll down all the way to the âÃÂÃÂStatic website hostingâÃÂàsection and our URL will be there. ![ ](httpsmiro.medium.com/max/1400/1*SbuQahvHex1KetHvddN2rw.png) Click on it and you app will open up in a new tab. HereâÃÂÃÂs mine! ![ ](httpsmiro.medium.com/max/1400/1*LcpVXd_SeBMLbJafgOAbEA.png) = Conclusion = We have successfully deployed our React app to Amazon S3! This is a great choice to quickly deploy and test your React prototypes and share it with others. ItâÃÂÃÂs really easy and quick to deploy as well. Hope this tutorial was useful for you! Happy coding! ðÃÂÃÂû *More content at * *plainenglish.io*