Deploy a React App on Amazon S3 (+ IAM) within minutes (and redeploy automatically)

Antoine Sauvage
Nov 21, 2017 · 6 min read
Image for post
Image for post
The perfect match !

[EDIT: this is the first episode of 3: at the end, you will have a React app, accessible from your domain name, optimally delivered via CloudFront.]

Part 2: Deliver your app in milliseconds via Cloudfront

Part 3: A domain name for your (React) App

React is an awesome Framework to develop webapps. At Ovrsea, we are definitively fans ! You can build a new one within minutes. The question is: how to make it available online easily and for free?

The first good news is that a React App is static. It means that once you built all your files, you don’t need a server to execute any instruction. Everything is handled by the browser. The second good news is that it costs almost nothing to host a static website on S3, the static content hosting service by Amazon. The third good news is that you can easily deploy any update automatically thanks to the S3 CLI. The perfect match !

If you want to discover how to hassle-free deploy your React app and update it in one command line, this tutorial is made for you. We will cover:

  • creation of a basic React App
  • configuration of a free AWS account
  • configuration of your environment
  • (re)deployment of your app

Create-React-App

This part is more than easy thanks to the wonderful ‘create-react-app’ scripts (https://github.com/facebookincubator/create-react-app).

First, install npm (as part of Node.js https://www.npmjs.com/get-npm). Then, type in your terminal:

npm install -g create-react-app

It installs all the scripts you will need. The -g stands for ‘global’, meaning that you will be able yo create React Apps everywheeeeere !

Then, where you want to create your ‘wonderful-app’, type:

create-react-app wonderful-app

To test your app, go into the folder:

cd wonderful-app

and start it with npm (it also works with yarn) !

npm start

You should see a basic webapp like below:

Image for post
Image for post

Stop the app (Ctrl + C or Cmd+C).

AWS configuration

You need to create an AWS account to deploy a website on S3. S3 is included in the free tier, meaning that below 20k requests on your website (and below 5 Go served), it is free of charge for a year !

To create an account, go to https://aws.amazon.com/ and follow the instructions. Once ready, we can go on:

IAM Profile (optional)

It is not recommended to use the root account (the one you just created) everywhere. Instead, it is better to create dedicated users according to your needs.

First, log in to your acount. Go to the IAM manager:

Image for post
Image for post

Then, click on the “Users” menu on the left, and “Add User”. Fill the fields Username and tick “Programmatic access”. You should see something like this :

Image for post
Image for post

Click on “Next: Permissions”. We know have to attach to this user the rights to use s3. This is given by a policy named “AmazonS3FullAccess”:

Image for post
Image for post

Then, validate the creation of the user. At step 4, an Access key ID and a secret access key are given to you. Save them somewhere for later:

Image for post
Image for post

Key creation (for those who did not create an IAM User)

If you prefer using you root account (not recommended !), you can create access keys by clicking on your name on top right corner, then “My Security Credential”, and “Access keys”. There, you can “Create new Access key”. Save the key in a very secure place !

Image for post
Image for post

AWS CLI

We will now install the AWS CLI. The AWS CLI is… a tool to manage all your AWS services through a CLI. Amazing !

The Amazon documentation is pretty clear (http://docs.aws.amazon.com/cli/latest/userguide/installing.html), the platform specific procedures are described at the bottom of the page.

Once you installed the tool, open a new terminal, and type aws configure

You will be asked your Access Key ID and Secret Access Key created earlier (for those who read too fast, in the previous section !).

You don’t have to chose your region and output format (just type Enter).

S3 Bucket creation

We are almost there ! We now have to create a bucket to host our app. Choose the S3 service :

Image for post
Image for post

Create a new bucket. You can choose the region close to your users. However, we will see in another article how to use Cloudfront to deliver your content as fast as possible all over the world. So it does not really matters:

Image for post
Image for post

Then, next, next, next until you bucket is created. Select the bucket once it is done. You should see something like this :

Image for post
Image for post

We have to:

  • update permissions
  • set up the bucket as static hosting

To update permissions, go to “Permissions”, click on “Bucket Policy”, and “Policy Generator”. You should see a form as shown below:

Image for post
Image for post

Fill Step 1: S3 Bucket Policy

Fill Step 2: Effect: Allow, Principal: *, AWS Service: Amazon S3, Actions: “GetObject”. For the ARN, you have to take the name of your bucket, and add /* at the end (meaning everyone can access all your files).

In my case, it is: arn:aws:s3:::wonderful-app/*

Click on “Add Statement”, and “Generate Policy”. It should generate a policy like this one:

{
"Id": "Policy1511261302545",
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Stmt1511261285825",
"Action": [
"s3:GetObject"
],
"Effect": "Allow",
"Resource": "arn:aws:s3:::wonderful-app/*",
"Principal": "*"
}
]
}

Copy and paste it into your bucket policy, and save:

Image for post
Image for post

Go to “Properties”, “Static Website Hosting”. Select use this bucket to host a website, fill the form and click save (and bookmark the URL given on top of the card):

Image for post
Image for post

AWS is now ready !

Deploy your app !

Now that everything is configured, it should work like a charm.

Add a line “deploy” to your package.json (syncing your “build” folder with you s3 bucket):

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"deploy": "aws s3 sync build/ s3://wonderful-app",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}

Run npm run build (it bundles and optimizes your app for production), and then npm run deploy. It’s all set !

You can now access your app !

Image for post
Image for post

Anytime you want to update you app, juste run npm run build and npm run deploy !

Enjoy !

In the next articles, you can learn to:

OVRSEA

The French digital feight-forwarder

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store