Create Front-End for Serverless RESTful API

In this post, we will build an UI for our Serverless REST API we built in the previous tutorial, so make sure to read it before following this part.

Note: make sure to enable CORS for the endpoint. In the API Gateway Console under Actions and Enable CORS:

The first step is to clone the project:

Head into the ui folder, and modify the js/app.js with your own API Gateway Invoke URL:

Once done, you are ready to create a new S3 bucket:

Copy all the files in the ui directory into the bucket:

Finally, turns website hosting on for your bucket:

After running this command all of our static files should appear in our S3 bucket:

Your bucket is configured for static website hosting, and you now have an S3 website url like this http://<bucket_name>.s3-website-us-east-1.amazonaws.com

Install MEAN Stack Using CloudFormation

AWS CloudFormation is a service that helps you model, setup and replicate your AWS resources. It uses a template file to bring up a collection of resources together as single stack.

To create templates we use a JSON file or AWS CloudFormation Designer. For this tutorial I opted the first solution.

Note: The template is available on my Github 😎.

We start with a basic template that defines a single EC2 instance with a security group that allows SSH traffic on port 22, MongoDB traffic on port 27017, and the NodeJS app on port 3000 from anywhere, as shown below:

In addition to that, we create two input parameters that specify the instance type and a Key Pair for SSH access. Then, we use UserData property to provide a set of shell commands to install MongoDB, NodeJS and bootstrap a simple MEAN application. Finally the output section print the public URL of the MEAN application.

Now we defined our template. Go to AWS Management Console then navigate to CloudFormation Dashboard and click on “Create Stack“:

Upload the JSON file and click on “Next“:

Assign a name to the stack, and choose your instance type and key pair you will use to ssh to the instance. Then, click on “Next“:

Left all fields unchanged and click on “Next“, then “Create

Once launched, you will get the following screen with launching process events:

After a while, you will get the CREATE_COMPLETE message in the status tab.

If you point your browser to the URL shown in the Outputs tab, you should see: a simple HTML message:

If we change the endpoint we should see a JSON response:

Congratulation ! ✨🎉 you have deployed your MEAN Stack application.

Go to EC2 Dashboard, you should see your instance there:

Verify the security group is setup as configured in the template:

To verify all packages and dependencies has been installed correctly, we can connect to the server via SSH:

To terminate the instance we can delete the stack from the CloudFormation Wizard, Deleting the stack will terminate all the instances launched by the stack: