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

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:

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:

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 :

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

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:

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 !

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 :

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:

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

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:

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:

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):

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 !

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:

• Configure Cloudfront to deliver you app efficiently https://medium.com/ovrsea/deliver-your-react-app-in-milliseconds-with-cloudfront-fd3a2d038445
• Configure Route 53 for your domain name, because a cool domain name is… cool !(https://medium.com/ovrsea/a-domain-name-for-your-react-app-c05821fd3518)