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:
- Get ReactJS running locally using a boilerplate (time: ~2 minute)
- Set up AWS (Amazon Web Services) S3 bucket (time: ~5 minutes)
- Create AWS user credentials to upload files to S3 (time ~2 minute)
- Deploy boilerplate to AWS (time: ~1 minute)
- Verify it works & start building your app!
1. Get ReactJS running locally using a boilerplate (time: ~2 minute)
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
2. Set up AWS S3 bucket (time: ~5 minutes)
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]/*"
}
]
}
3. Create AWS user credentials to upload files to S3 (time ~2 minute)
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)
4. Deploy boilerplate to AWS (time: ~1 minute)
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
5. Verify it works & start building your app!
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.
Next steps
A couple other step by step tutorials in the pipeline:
- How to quickly build a yelp clone utilizing www.onederful.co GraphQL endpoint (ReactJS + GraphQL + wish driven design!)
- How to query across multiple companies APIs using www.onederful.co GraphQL endpoint
- Setting up a serverless GraphQL endpoint (Serverless framework — AWS Lambda)
- Setting up a completely serverless webapp using AWS Cognito (for user management) + AWS Lambda
- Using AWS Cloudfront + Route 53 to put a CDN in front of this webapp (enabling caching + https for custom domains/subdomains)
Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!
