How to deploy a live ReactJS/Redux website in under 10 minutes

How to deploy a live ReactJS/Redux website in under 10 minutes

☞ 

#reactjs

  • Set up AWS S3 bucket (time: ~5 minutes)a) Log into AWS console and click on S3b) Click create bucket and enter a Bucket name(example: onederful-quickstart).
  • Click Next through all the remaining steps and create the bucket.In Bucket name, use a unique name for your appc) On the list view, click on the newly created bucketYour newly created bucket should be in the list viewd) A popup will show up, click on propertiesClicking on the properties panel will…
  • The error document being set to index.html enables the React app to define and handle all the routing rather than S3f) Click on permissions tab and copy and paste the policy (replacing [YOUR BUCKET NAME] with your bucket name){ “Version”: “2012-10-17”, “Statement”: [ { “Sid”: “AllowPublicRead”, “Effect”: “Allow”, “Principal”: “*”, “Action”:…
  • If you don’t include this, the endpoint in step e) will return a 403 unauthorized error as it defaults the bucket to private.

Ever had an webapp idea that you wanted to quickly prototype and send to people? After going to 8+ hackathons and winning over $105,000 in prize money, I’ve found a pretty good way to get a fully…

2. Set up AWS S3 bucket (time: ~5 minutes)a) Log into AWS console and click on S3b) Click create bucket and enter a Bucket name(example: onederful-quickstart). Click Next through all the remaining steps and create the bucket.In Bucket name, use a unique name for your appc) On the list view, click on the newly created bucketYour newly created bucket should be in the list viewd) A popup will show up, click on propertiesClicking on the properties panel will redirect you to the properties tab for the buckete) Click on Static website hosting and enter in index.html for both fields Index document and Error documentThe endpoint is the public URL you can share with anyone. The error document being set to index.html enables the React app to define and handle all the routing rather than S3f) Click on permissions tab and copy and paste the policy (replacing [YOUR BUCKET NAME] with your bucket name){ “Version”: “2012-10-17”, “Statement”: [ { “Sid”: “AllowPublicRead”, “Effect”: “Allow”, “Principal”: “*”, “Action”: “s3:GetObject”, “Resource”: “arn:aws:s3:::[YOUR BUCKET NAME]/*” } ]}This policy allows everyone (principal: “*”) to see the objects (your website) in your bucket. If you don’t include this, the endpoint in step e) will return a 403 unauthorized error as it defaults the bucket to private.

How to deploy a live ReactJS/Redux website in under 10 minutes