5 minute guide on how to deploy React Apps with S3

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: https://aws.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”.

Click “Next: Permissions” and here select “Attach existing policies directly”. Check “AdministratorAccess” for the deployment purpose.

Click through the Next buttons and finally click on “Create user”.

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”.

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 https://github.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!

Turn on public access to the bucket since we are hosting it live.

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.

Let’s click and go into our newly created S3 bucket.

Let’s click on “Properties” and scroll all the way to the bottom where you will see “Static website hosting”.

Click on “Enable” and enter “index.html” under Index document.

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/ s3://<your-bucket-name> --acl public-read

We can add this command to our package.json file too as a “deploy” script.

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.

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.

Click on it and you app will open up in a new tab. Here’s mine!

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! 💻

Further Reading

Deploying a Composable React App to Netlify
In this blog post, we will learn how to build and deploy a composable React app to Netlify, using Bit. In Bit…bit.cloud

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord. Interested in Growth Hacking? Check out Circuit.

Deploy React Apps on Amazon S3