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!
Prerequisites:
Node.js (version > v6.0)
AWS account (everything here is covered under the free tier)
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
It takes a couple seconds to build, but when its done go to http://localhost:3000/ in your browser
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.
In Bucket name, use a unique name for your app
c) On the list view, click on the newly created bucket
Your newly created bucket should be in the list view
d) A popup will show up, click on properties
Clicking on the properties panel will redirect you to the properties tab for the bucket
e) Click on Static website hosting and enter in index.html for both fields Index document and Error document
The 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 S3
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]/*"}]}
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.
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
Use the AmazonS3FullAccess policy to enable the React app to use AWS APIs to deploy the website to S3
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)
If you plan to save this project to a public git repo, make sure to hide your credentials. 1 way to do this is to import the credentials from a file that is in the .gitignore
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)