Building serverless web applications on AWS without API Gateway

Chris Stura 14th September 2018
BLOG Building serverless web applications on AWS without API Gateway

Cloudreach Chief Architect, Chris Stura explores how to make use of the AWS Javascript SDK in the browser to build a serverless single page web application without using API Gateway.

If you have ever written a NodeJS application for AWS it is likely that you have come across the AWS Javascript SDK. It is, however, less common to see this used in the browser. We will explore how to make use of the Javascript SDK in the browser to build a serverless single page web application without using API Gateway.

 

Building Serverless web applications on AWS is now fairly mainstream. This is normally done by using a combination of S3, Lambda and API Gateway where Lambda functions. The typical flow is that you upload a bootstrap HTML file to S3 with all of the javascript or CSS resources to a bucket. Enable web hosting on that bucket and then use jQuery, or some other AJAX framework, to make calls to the Lambda functions via API Gateway.

 

However, the AWS CLI and all of the SDK implementations allow you to call these functions directly via the REST API’s which are all exposed on public endpoints and governed through the standard AWS authentication mechanisms. Of the many SDK’s available from Amazon, there is one for Javascript which, though primarily used in server-side NodeJS type developments, can also be used within the context of a browser. Of course, making calls directly to the AWS services via the SDK does not offer all of the same features of API Gateway but it does provide an alternative way of achieving the same results with fine-grained security delivered by Cognito (a service we often see used when building Mobile applications on AWS).

 

In this article, we will use “Terraform” to deploy a simple Hello World application (because everyone loves a Hello World application) which will get the famous phrase directly from a Lambda function asynchronously after our single page web app has been loaded.

The Architecture

Building serverless web applications on AWS without API Gateway _Architecture

As with most serverless architectures, the setup is fairly simply. This diagram also excludes the definitions of the security setup but the concept is fairly simple. We host our bootstrap html file along with some of its static resources on s3. Of the files we host, we also placed a reduced version of the AWS SDK for Javascript which can be generated based on which services you need to access in your application from this page.

 

https://sdk.amazonaws.com/builder/js/

 

Normally you will only really need Cognito and Lambda, as described in this article, as you can then access any other AWS PaaS or other services via exposed Lambda functions.hat will also limit the security liabilities of your Cognito identity pool to the Lambda functions which run defined business logic and interact with the AWS services in a way which is controlled and defined.

 

If you want to download a pre-built version of the SDK that was used to build this article you can access that at this url:

 

https://d31gk5kmzda7j6.cloudfront.net/js/aws-sdk-2.306.0.min.js

 

Similarly, if you want to deploy this to your own AWS account you can download the Terraform template here:

 

https://d31gk5kmzda7j6.cloudfront.net/iac/template.tf

The Nuts and Bolts

The key parts of the application are the Lambda function of course which can be found below:

 

exports.handler = async function(event,context) {

   return "Hello World";

}

 

And the front-end application javascript which calls this function through the AWS Javascript SDK:

 

AWS.config.region = 'eu-west-1';




//we should not do the below but use cognito instead, however for the time being this will be sufficient.

AWS.config.credentials = new AWS.CognitoIdentityCredentials({IdentityPoolId: '<<AWS IDENTITY POOL ID>>'});




$(document).ready(function() {

   var lambda = new AWS.Lambda();

   lambda.invoke({

       "FunctionName" : "hello_world",

       "InvocationType" : "RequestResponse",

       "LogType" : "None"

   },function(err,data) {

       if(err) {

           $("#txt").html("<pre>"+JSON.stringify(err)+"</pre>");

       } else {

           $("#txt").html(JSON.parse(data.Payload));

       }

   });

});


The Terraform template provided will output the id of the created identity pool once it finishes executing. So all you will have to do is copy and paste that value into the correct place in the code above.

 

This is a very simple example but, via this same mechanism, you can glue together any AWS service you like to build a dynamic web application using a simple static web page. Though I recommend using Lambda to wrap up your business logic and then utilise that logic to populate your web application (possibly with a more complete web framework like React.js or Angular.js).

Conclusions

The public cloud is a truly versatile environment for building applications of any kind and there is often more than one way to solve a problem using the different available technologies. I enjoyed building this application because I think it helps to demonstrate the power of public cloud and the reduced reliance we have on traditional infrastructure thanks to the services offered by our Amazon and others. I hope that you enjoyed this article and that it has provided a different perspective into how public cloud can be consumed in the application space.