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:

 

Deploying Node.js Application on AWS Elastic Beanstalk

Contrary to EC2, Elastic Beanstalk has Node.js, Go, Java, PHP … installed out of the box 😻. That lets you deploy, monitor and scale your application without having to worry about the infrastructure setup. In this post I will show you how to deploy a simple Node.js application on Elastic Beanstalk.

1 – Elastic Beanstalk setup with AWS Console

Go to AWS Management Console, then click on “Elastic Beanstalk”:

Next, click on “Create New Application”:

Assign a name and a short description for your application, then click on “Create”:

Next, create a new environment by clicking on “Create one now”:

Choose “Web server environment”:

Then fill the form as below:

It will take anywhere from 2 – 5 minutes for Elastic Beanstalk to fully create the necessary instances and start the web app.

After a couple minutes, you should see:

If you point your browser to the URL shown above:

Congratulations 😁 you have successfuly deployed a simple Node.js app on EB.

2 – Upload your App Code

Note: You can use your own code if your Node.js application is ready to be deployed.

Download the simple Node.js app from my Github.

Then, on the EB Dashboard click on “Upload and Deploy“:

A popup will show up, so upload your app code and assign a version to it, then click on “Deploy“:

 

Once the Application has been upgraded you can jump directly to it’s webpage by clicking on the URL shown on the dashboard.

3 – Elastic Beanstalk setup with EB CLI

In this section, I will show you how to deploy the same app by using the AWS EB CLI.

First, install the CLI, if you already have pip you can issue the following command:

After you install the EB CLI, add the path to the executable file to your PATH variable.

Once done, you need to create a new user account in order to manage EB resources with EB CLI. I already did a tutorial on how to create a new User with IAM, so I won’t repeat it. There is one way you’ll want to differ from the tutorial:

  • Add AWSElasticBeanstalkFullAccess to the user permissions list:

Copy down the Access Key ID and Secret Access Key. We’ll need this to connect via the EB CLI interface.

Then, modify your ~/.aws/credentials file and add the following content:

Then in your Node.js application directory, configure EB by typing the following command:

The command take as arguments:

  • –profile : the user profile we created earlier
  • -p: the application language

then set the region on which you want to deploy your application.

Once you finish , issue the command ‘eb-create‘:

After the EB instance is created you can deploy it:

Once deployed , you can open the app by either clicking on the URL on the EB Dashboard:

or by running the command ‘eb open‘:

4 – EB CLI commands

4.1 – eb logs

To pull logs from the instance:

4.2 – eb health

To check the health status of the app:

4.3 – eb terminate –all

To clean up the EB instance:

For a full list of available EB CLI commands, check out the EB CLI Command Reference.