Hosting React.js on AWS S3

As I embark on learning React.js I quickly discovered my normal FTP workflow would not cut it. After some exploration I learned how to host on Amazon’s AWS S3. New accounts get 1 year of S3 for free, along with other free AWS goodies. And beyond the 1st year S3 is very reasonably priced.


Table of Contents


Setting up an S3 bucket

If you don’t have an AWS account already, go set one up for free:

When you’re all set, log into the AWS console:

Access the gigantic Services menu and select S3.

If no bucket exists, you’ll be prompted to create one. In S3 terminology a bucket is a collection of files and folders. It’s common for each bucket to represent a different website. If you do not have an existing bucket, press “+ Create bucket” to make one.

Set bucket properties
Properties > ‘Static website hosting’
Enable and point it to the relevant index document.

Permissions > Bucket Policy

 "Version": "2012-10-17",
 "Statement": [
 "Sid": "AddPerm",
 "Effect": "Allow",
 "Principal": "*",
 "Action": "s3:GetObject",
 "Resource": "arn:aws:s3:::yearendreview/*"

Return to bucket overview and upload your files.

S3 buckets can be accessed in the browser with the following URL structure:



Accessing S3 via command line

We’re going to need access to S3 via the command prompt. To do that we’ll need two things, an S3 command utility and AWS Access Keys.

You can use the following instructions to setup your Access Keys:

Once your keys are in place, go to your command prompt and install a utility CRUD actions on your S3 bucket. I use the Mac / Linus utility called s3cmd, found here: Install it with the following command:

$ brew install s3cmd

Once installed, go through the config process to input your keys and bucket information:

s3cmd --configure

Once configured, the only command you’ll need is sync, which will move the content of your source folder to the specified bucket:

s3cmd sync source_folder/* s3://bucket_name/

That being said, s3cmd is a useful utility. Here are a few bonus commands:

cloning buckets

s3cmd mb s3://new_bucket_name
s3cmd sync s3://old_bucket_name s3://new_bucket_name

deleting buckets

s3cmd del -r s3://bucket_name/folder

Read more in the s3cmd documentation:


Automate react deploy to S3

With command line access setup, we can take the final steps to automate the build and deploy process. In package.json add a script to build and deploy. Example:

"scripts": {
 "start": "webpack-dev-server",
 "deploy": "npm run build && s3cmd sync build/* s3://bucket_name/ && echo '🚀 Deployed!'"

Now, finally, with this setup you can build and deploy to your S3 bucket with the following command:

npm run deploy

Add a Comment

Your email address will not be published. Required fields are marked *