If you want a deployed static React App quickly:
S3, Terraform and create-react-app make it quite painless.
The following are instructions for creating a new React and making publicly addressable, using AWS and Terraform.
Install Libraries
Note: These are instructions for OSX
Note: I assume that you have an AWS account.
Note: I assume that you have npm installed.
Note: I assume that you have homebrew installed.
Install Terraform
brew install terraform
Install create-react-app
npm install -g create-react-app
Ensure your AWS credentials are in the right place
~/.aws/credentials
More info on AWS Security Credentials here
Build a new "create-react-app"
create-react-app my-app
Create S3 bucket and Policy
provider "aws" {
region = "us-east-1"
}
variable "bucket_name" {
default = "your-very-cool-bucket"
}
resource "aws_s3_bucket" "react_bucket" {
bucket = "${var.bucket_name}"
acl = "public-read"
policy = <<EOF
{
"Id": "bucket_policy_site",
"Version": "2012-10-17",
"Statement": [
{
"Sid": "bucket_policy_site_main",
"Action": [
"s3:GetObject"
],
"Effect": "Allow",
"Resource": "arn:aws:s3:::${var.bucket_name}/*",
"Principal": "*"
}
]
}
EOF
website {
index_document = "index.html"
error_document = "index.html"
}
}
output "website_domain" {
value = "${aws_s3_bucket.react_bucket.website_domain}"
}
output "website_endpoint" {
value = "${aws_s3_bucket.react_bucket.website_endpoint}"
}
Apply your changes with terraform:
terraform apply
Place your code into the Bucket
Build your code:
npm run build
Push it up to S3:
aws s3 sync build s3://your-very-cool-bucket
Terrafuzz (AKA an easier way)
I also built a tool, that handles this setup for you.
Inside your React application:
git clone https://github.com/davidbegin/terrafuzz.git
cd terrafuzz
mv variables_template.tfvars variables.tfvars
# open up variables.tfvars and add your unique bucket name
# In our current example: your-very-cool-bucket
./terrafuzz.sh apply
and you are done, you now have a deployed website!
For more information visit Terrafuzz's Github