Full Stack Development Tutorial: Integrate AWS Lambda Serverless Service into Angular SPA | by J Li | Towards Data Science

(this post is also available in my blog)
This post is the last post of my Full Stack Development Tutorial Series. In this post, we will integrate the backend Lambda REST API into Angular App we previously developed. Previous posts are Visualize Trading Data on Angular SPA and Serving Trading Data with Serverless REST API running on AWS Lambda.
Update angular service to call REST API from Lambda
First of all, we need to updat the service in SPA to call REST API from Lambda instead of returning dummy data. Note that, we have defined a Subject so that chart component can be subscribe to. Upon the completion of REST API call. It emits the historical data. From the Chart component, it would receive it and do some business logic with the response.
Update the chart component to use the historical data from Lambda to visualize the chart. In this typescript, we subscribe to the Observerable from StockDataService. It then assign the response from Lambda to the chart.
Publish web application
Now, we can create a public website for your application. First, we need to build production code for angular app deployment. Run this following command from terminal.
ng build --prod
This command will result in dist folder which contains all static files of this SPA. We will deploy it to S3 for building a pubic website.
Create an S3 bucket
Create a new bucket. Your bucket name will be part of the website url unless you bought your own domain and set it up for your web application.
Accept all default options and create it. Then select the newly created bucket, click on permisions. In block public access, we have to uncheck Block “public access to buckets and objects granted through new public bucket policies” and “Block public and cross-account access to buckets and objects through any public bucket policies”, so that public users can access to this web app.
We would also need to add a bucket policy.
{    "Version": "2012-10-17",    "Statement": [        {            "Effect": "Allow",             "Principal": "*",             "Action": "s3:GetObject",             "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*"         }     ] }
Upload content
Upload the files in dist/stock-app folder to the bucket
Enable Web hosting
Open properties, and select “Static website hosting”. Type index.html for index documemt and check “Use this bucket to host a website”.
By now, you should be able to open your SPA in http://<bucket_name>.<your-region>.amazonaws.com/, in my case it is http://stock-spa-jli.s3-website-us-west-2.amazonaws.com/. However, You will encounter a problem. You are not able to see any data. That’s because our REST API and API gateway doesn’t allow CORS. We will explicitely enable it.
Enable CORS
Next, we need to enable CORS in our API gateway, so that the API in Lambda can accept cross origin request.
Open up API Gateway service in AWS console and select the gateway for our Lambda developed in last post. Select the endpoint you want to enable CORS. For simplicity, I choose ANY. Then in the Action dropdown, select enable CORS and confirm.
Verification
By now, we are all set. Your Lambda should be able to serve data for your SPA. Go back to your website hosted in S3. You will see the stock chart for SPY.
That’s all. We develop a simple full stack web application in Angular, with Serverless framework, AWS Lambda, API gateway, S3. And it’s deployed with CloudFormation. Almost all backend AWS Lambda is handled effortless by serverless framework.
Recommnded reads:
Learn the A to Z of Amazon Web Services (AWS)
AWS Lambda in Action: Event-driven serverless applications 1st Edition
Amazon Web Services in Action 2nd Edition
My older posts:
My posts about Finance and Tech
My posts about FAANG interview
From CRUD web app dev to SDE in voice assistant — My ongoing Journey to Machine Learning
Full Stack Development Tutorial: Serving Trading Data with Serverless REST API running on AWS Lambda
Full Stack Development Tutorial: Visualize Trading Data on Angular SPA
Reinforcement Learning: Introduction to Q Learning