◄︎ Gregor's Portfolio Site
11 Nov 2017

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.

Setting up an S3 bucket

If you don’t have an AWS account already, go set one up for free: https://aws.amazon.com When you’re all set, log into the AWS console: https://console.aws.amazon.com 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: <bucket-name>.s3-website.<bucket-region>.amazonaws.com Example: http://mypage.s3-website.us-west-2.amazonaws.com

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: http://docs.aws.amazon.com/general/latest/gr/managing-aws-access-keys.html 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: http://s3tools.org/s3cmd . 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: http://s3tools.org/usage

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