Build a robust MEAN website in under an hour for less than $1/day

If you need to get a robust website up in under an hour- like for a hackathon or a proof of concept- then this tutorial is for you.

Hackathon ready website template. No coder skills are required, only an Amazon Web Services (AWS) account.

The price of $1/day isn’t an average — with AWS you actually pay pennies per hour. This means you can chuck it out the virtual window and not pay anything more when your hackathon is done, or if you should so choose, you can take this website on to more glorious aspirations without having to rewrite everything.

Backstory

About a month ago at 3AM I was sitting in the New York AWS Pop-up Loft. Normally the AWS Pop-up Loft is an open workspace and “genius bar” open to developers in need of AWS help. Friendly AWS Solution Architects are on-demand to assist curious minds along with free freeze pops, candy and cereal.

At three in the morning the Loft was strewn with aisles of rectangular folding tables and hundreds of caffeine-zonked coders competing in the 2016 Angelhack Manhattan Hackathon. I was hoping to win my team the AWS sponsor prize of a free Kindle Fire for each team member. (I love free stuff.)

Though at three in the morning, I was having problems figuring out why my bower scripts weren’t working on Elastic Beanstalk.

My commit messages, reading from bottom to top, slowly evolve from hope to despair.

Bower is an npm-maven-nuget open-source-repository for front-end libraries. Without bower scripts having been run, I was getting blank web pages because the angular libraries hadn’t loaded.

In the end I listened to the words of the cartoon villain Yosemite Sam, “If you can’t beat them, join them.” Or in this case, if I can’t get bower to install my client side dependencies like angular then I’ll check them in and figure it out another day.

I gave up and checked in my “bower_components” folder along with my grunt produced minified javascript files. I then moved on to more important things. I enjoyed using ElasticBeanstalk. Up until the deadline I was able to deploy our application in less than five minutes, each time with a simple command of “eb deploy”.

That afternoon we presented our application and won the AWS sponsor prize (a Kindle Fire HD 6 for each team member) as well as the hackathon grand prize (entrance to Angelhack’s hackcelerator program and a one year CloudAcademy subscription.)

I realize not everyone will win a hackathon from using AWS Elasticbeanstalk, but it’s a definite possibility.

The other side of the looking glass

If you still have doubts on why you may want to invest in a robust scaffold site for a proof of concept instead of keeping it super simple, check out this video of my co-worker losing all faith in humanity at the 2016 TechCrunch Disrupt Hackathon in Brooklyn. As they present their single page anonymous app, other hackathon participants open up their app during the presentation and start overflowing the chat window with swear words.

The Walkthrough

Today is “another day.” Here is a walk-through start-to-finish for any hacker who would like to use a robust Node.js scaffold like the Yeoman MEANJS template and benefit from AWS’s easy deployment service ElasticBeanstalk.

Click here to see the finished repository with my elasticbeanstalk scripts

If you don’t want separate configuration files for each environment or you have minified JavaScript files generated by Grunt and libraries pulled down by Bower — if you just have a simple Node application then any AWS walk through will work like this one.

But if you want to build something you can scale, that already comes with a login model, resource permissions, Facebook integration, a live chat sample and code built with design best practices in mind, then check this out.

Prerequisites

In my walkthrough I’ll be using a clean Windows 10 virtual machine with nothing installed. The only thing you’ll need is an AWS account.

If you’d prefer to skip the step-by-step screenshots, I’ve included links below to the required software and the console commands needed for each script library.

Click here to go straight to the start of the step-by-step instructions

I’ll be demonstrating installs of the following software:

• Git Bash
• Python 3.5.2
• Ruby 2.3.1 (x64)
• MongoDB 3.2.8
• Node.js
• AWS-CLI Tools

I’ll be demonstrating the following template and script libraries:

• Yeoman meanjs (0.4.2)

npm install -g yo

• Grunt

npm install -g grunt-cli

• Bower

npm install -g bower

• MeanJS generator

npm install -g generator-meanjs

• MEAN.JS Scaffold (also installs angular and express)

yo meanjs

• Python pip installer

python -m pip install --upgrade pip

• AWS EB Client Tools

pip install awsebcli

• Ruby Gems & sass

pip install gem
gem install sass
gem install bundler

I’ll be using the following AWS services

• ElasticBeanstalk: Run and Manage Web Apps
• Route 53 (optional): Scalable DNS and Domain Name Registration
• EC2: Virtual Servers in the Cloud
• Identity & Access Management: Manage User Access and Encryption Keys
• Certificate Manager: Provision, Manage, and Deploy SSL/TLS Certificates
• VPC: Isolated Cloud Resources

Local Machine Setup

Click here for step-by-step instructions for setting up your local machine

1. Install Git with Bash
2. Install Python 3.5.2
3. Install Node 6.3.0
4. Install MongoDb 3.2.8
5. Configure MongoDb as a Windows Service
6. Install Ruby, Gems and Sass
7. Install AWS Client Tools and AWS Elastic Beanstalk client tools
8. Install NPM libraries
9. Setup your template MEAN.JS application
10. Initialize your Git Repository
11. See local website run
12. One more step so I can say it’s a 12 step program

Amazon Web Services Setup

1. Configure your IAM roles
2. Configure a VPC with a public and private subnet
3. Expose your public subnet using an Internet Gateway
4. Allow internet access from your private subnet using a NAT Gateway
5. Launch an EC2 instance in your private subnet for MongoDB
6. Register your Domain Name (optional)
7. Create an SSL certificate for your website (optional)
8. Setup your application in ElasticBeanstalk
9. Create an environment in your new ElasticBeanstalk application
10. Troubleshoot an ElasticBeanstalk deployment and add ebextensions
11. Deploy a change using the EB client tools
12. See internet website run

I hope this has helped. If you’re doing a hackathon, the last thing you want to be doing is figuring out deployment issues. You want to spend as little time as possible on the scaffold and as much time as possible on the actual features you’re trying to prototype.

I’ll be working on transferring all my walk-through instructions this week out to Medium. Please stay tuned.