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: 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
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: 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:
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:
s3cmd mb s3://new_bucket_name
s3cmd sync s3://old_bucket_name s3://new_bucket_name
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:
"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