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 functional website up and running in < 10 minutes.
Preview of deployed website (demo)
TL;DR steps:
Prerequisites:
Node.js (version > v6.0)
AWS account (everything here is covered under the free tier)
a) Clone the boilerplate (run below commands in your terminal)
$ git clone -o onederful-quickstart -b master --single-branch \
https://github.com/alxyee/onederful-quickstart.git NameOfApp
$ cd NameOfApp
b) Install all libraries
$ yarn install
c) Get React running locally (http://localhost:3000/)
$ yarn start
a) Log into AWS console and click on S3
b) Click create bucket and enter a Bucket name(example: onederful-quickstart). Click Next through all the remaining steps and create the bucket.
c) On the list view, click on the newly created bucket
d) A popup will show up, click on properties
e) Click on Static website hosting and enter in index.html for both fields Index document and Error document
f) 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]/*"
}
]
}
a) In the AWS console click on IAM (Identity Access Manager)
b) Click on Users tab on the side panel. Add a User called s3-admin
c) Attach the AmazonS3FullAccess policy
d) After creating the user, keep track of your Access key ID and Secret Access Key (the credentials will be used in the final step)
a) Change the credentials in the file (tools/s3-upload.js) replace: ‘YOUR_BUCKET_NAME’ with your bucket name (step 2b) ‘YOUR_AWS_ACCESS_KEY’ with your Access key ID (step 3d) ‘YOUR_AWS_SECRET_KEY’ with your Secret Access Key (step 3d)
b) Build and deploy the quickstart app (run this command whenever you want to deploy a change to your webapp)
$ yarn publish:webapp
Test the endpoint (from 2e) in your browser and make sure it’s up and running. If it is, you’re ready for the real work of building your app!
To summarize : Used a boilerplate to quickly get a working webapp using ReactJS/Redux running on localhost. Set up AWS S3 to host the website with a public endpoint. Set up AWS credentials to enable us to deploy the boilerplate to S3 from the command line.
The AWS setup only has to be done once, so now if you make any changes to your webapp, you can run the deploy command (4b) and within seconds, the changes will be live.
A couple other step by step tutorials in the pipeline: