Building Server-less Web Application Using AWS Amplify
You have got an excellent idea of a web application and you want to get started with with. You are scratching your head deciding which technology stack to go with. You are considering MEAN (MongoDB, Express.js, AngularJS, and NodeJS) or MERN ( MongoDB, ExpressJS, ReactJS, and NodeJS). Then you start thinking of going live with your cool idea. Some of the questions you encounter are how would you manage the servers running your database (MongoDB or MySql) and your Node-Express middle tier, what if your application takes off well and you are receiving more traffic than you expected, how would you scale.
There are multiple possible solutions for these common questions and all cloud service providers offer various services and framework to achieve the same. I am curious about server-less solutions and have been exploring the same for some time. Here I am presenting one such solution using AWS services- Cloudfront, S3, API gateway, Lambda and DynamoDB. If I were to put these into an acronym, it would be DAAN (DynamoDB, API Gateway, Angular and NodeJS). High level architecture is shown below:
The best thing is the I am using AWS Amplify (Amplify )framework which gives nice interface to setup and manage all the AWS services involved.
I will walk you through step by step starting from creating a a simple Angular application, to adding API and finally, to hosting it in AWS. For this guide, I will build a naive web application which lists the top movie titles, the year when they were release and average ratings (The data I will display is for education purpose only and may not reflect the actual movie details).
First things first, let’s create folder for our ‘ServerlessDemoApp’ and create a new Angular project using Angular Cli (Angular Cli):
This creates basic project scaffolding. At this point, we have one component containing some static content from Angular seed. Let’s build and run what we have got so far:
If the build is successful, our application looks like this in the web browser:
Now it is time to add the functionality we want. For the sake of keeping this simple, I am going to just modify the app component and I will add an HTML table with header columns- Title, Year and IMDB Rating. This is how app component template looks now:
For now, I will display three rows of hard coded data as shown below:
Now our applications looks like:
Impressive, right? Just kidding! This is just to show some data before adding API and back-end layer.
Now comes the main part of this story: getting started with AWS Amplify. Best to my understanding, Amplify is a framework to help developer build and manage server-less application using cloud-native architecture. To start with, we would initialize amplify in our web application at the root level:
“amplify init” asks you couple of questions. Some of them, like editor choice, are bit personal and you may select other options. Amplify uses AWS credentials which means you need to have an AWS account :). Also, you need to be in a role which gives you access to certain AWS services which are used by AWS Amplify (more on this here ). I have done this setup and I am all set to let AWS Amplify do it’s magic!
AWS Amplify takes a few mins, as it creates a Cloudformation stack in the background. Once it completes, you should see something similar to this:
AWS amplify did quite a few things. First and foremost, it added a folder- ‘amplify’ to our project:
As you can see in the screenshot above, there are 2 folders under ‘amplify’: ‘.config’ and ‘backend’. ‘.config’ folder contains the information about the local environment. The file- ‘project-config.json’ is worth noting. It contains information about building and packaging of our web application, the Angular part:
Pardon my free form, wavy arrows here :) I think they can still point out the connection with the contents of this file to the Angular app. for example, “SourceDir” is the root of the Angular app. “BuildCommand” points to the command we specify to build the Angular code. “DistributionDir” is the directory where final Angular code would go after the build command executes.
‘backend’ folder contains the information about back end of our project, namely, API and Storage. Right now, we don’t have anything defined for the back end as revealed by the “backend-config.json” file below:
Now let’s take a look at AWS console and checkout what Amplify did for us. For starters, when we initialized amplify in our project, it created a Cloudformation stack:
This is simply a AWS S3 bucket for the web application code:
Alright, now it is time to rest of the pieces of stack to our application. It is going to be AWS DynamoDB for the database and we will use API Gateway which will invoke an AWS Lambda function. Let’s begin with ‘amplify add api’:
There are several selections we have to make in this process. First, whether we want REST API or GraphQL. For this project, I am going with RESTFul API. Next is the name for our API, followed by the path which is ‘/movies’ in our case. Path is followed by configuration for the Lambda function which includes a name for the Lambda function, the runtime (NodeJs in our case) and selection of Lambda function code template (I have selected ‘CRUD function for DynamoDB’). After this, Amplify asks for details for the DynamoDB table we want to create, starting with table name- ‘serverlessDemoAppMovies’ along with columns- ‘title’, ‘year’ and ‘rating’. For our app, all these columns are of ‘string’ type. I am adding a partition key of ‘title’ column. With all these selection, Amplify gets back to work and configures all the necessary resources.
Let’s check the status so far via ‘amplify status’:
As you can see, these resources are configured locally. Next step is to tell Amplify to actually create these resources in AWS using ‘amplify push’:
It takes few minutes for it to create the table, the API Gateway and the Lambda function. Once complete, you should be able to see an API gateway URL like:
Let’s take a look at the AWS Console and as you see it created an API gateway, a Lambda function and a DynamoDB table:
Also look at the API configuration locally:
It has added ‘/movies’ and configured a corresponding Lambda function for querying and updating DynamoDB table.
Now we have to actually deploy our web application to AWS. We will do ‘amplify hosting add’ and then ‘amplify publish’:
Finally our web application is up and running in AWS!
Right now, it is showing the hard-coded data in the app.component.ts. Now we will add some data to DynamoDB table, add API in app.component.ts and change Lambda function a little bit to return all rows of the table. First we need to install- ‘aws-amplify’ and ‘amplify/api’:
Next, we will add ‘amplify/api’ to ‘main.ts’ and initialize it:
Now it is time for adding API to the ‘app.comonent’:
Here we are telling the Angular app to fetch data from the database when the app component is initialized by invoking the ‘/movies’ API. This would hit the API gateway which we had setup earlier and would then invoke the Lambda function. The app.component doesn’t know beyond the API where the data is coming from which is a good design principle.
Next step is to add 2 items in the DynamoDB table:
Time to test our application end to end. Now if we start our web application locally, it should get the data from table above:
Nice. All pieces are integrated well and our application is now displaying desired data. Now we are ready to release our functionality. We would use ‘amplify publish’ again:
Amplify publish transpiles the Angular web app code, prepares it for production deployment and deploys to AWS S3. It might take a few minutes as it re- deploys the code via AWS Cloudformation. Once completed, you should see result similar to:
It tells us that our deployment finished successfully and provides us with the URL for our web application. we now copy the URL and paste in a web browser and would see the data coming from the table as expected:
Amazing, isn’t it!
No server setup to do, no running multiple shells- one for database (Mongo/MySql), one for Node/Express server and one for the web application.
Code for this application can be found here- https://github.com/sk-saurabh/ServerlessDemoApp
Nice thing about it is that it uses AWS services which are server-less and scale-able. AWS Amplify comes with other features like authentication, pub-sub, notification, analytics etc. Even though the web application is deployed in AWS S3, we can have custom domain (custom URL) using Router 53 service. Probably, all these are topics for a future story:)
Thanks for reading this, hope it was good use of your time. I would be happy to see your comment. Happy coding!
