Setup Angular 10 Universal on AWS Lambda from scratch
By: Sahil Purav
Tags: Angular, Serverless, Nodejs, Server Side Rendering, Angular Universal

Update: Thank you very much for your overwhelming response on original article. I’ve received a lot of request on social platforms for updating the article to support Angular 10+. So here you go… this article is an edited version of setting up Angular 6–8 universal setup on serverless framework.

Introduction

With the growing popularity of Single Page Applications, Angular (backed by Google) is one of the best and widely used frameworks among React, Vue, and others. While there are many benefits of using SPAs over traditional MPA (Multi-Page Applications), its process to render the DOM by executing JavaScript on browser causes poor performance on the first-page load and lacks SEO friendly feature (although it is improved in Google but not all search engines support SPA crawling).

Angular has a “Universal” package that solves above specific problems by generating the static application page that later converts to a fully functional SPA page by bootstrapping at the client browser. It improves the first-page load drastically that gives users a chance to view some parts of the application view before it becomes fully functional. Since the title, meta, contents, etc are generated from the server, search engines easily understand and make them SEO friendly.

Angular Universal requires the page to be generated on Server hence, in an ideal scenario, we would require a physical instance e.g. AWS EC2. Having a physical server increases infrastructure management as you may want to configure your servers with required packages and auto-scale based on the load.

In this article, we’re going to learn how to deploy your entire universal application on AWS Lambda using “Serverless Framework”. Serverless is a buzzword that has been on the rise for the past few years, and it doesn’t look like it’s going to stop, more companies are adopting it considering its benefits like “low cost”, “ease of deployment”, “infinite scalability”, “improved latency” and many more.

Why setting up from scratch?

Yes, there are plugins available to achieve this easily. But there are plenty of benefits by setting up “Serverless Angular Universal” from scratch:

Simulate lambda and API gateway on local

Easy termination of the entire infrastructure

More flexibility to customize the process

…and of course, you will learn the insights!

Prerequisites

The task requires you to have the following packages installed on the system:

If you don’t have any of the above prerequisites, please click on the links and follow the instructions to get started.

Once you installed AWS CLI, configure the access id and secret key (rest things are optional and you can keep leave them blank) by hitting:

aws configure

In a hurry?

I’ve created a https://github.com/sahilpurav/ngx-serverless-starter with all the required configuration to serve Angular Universal on the Serverless framework.

Set up an Angular project

We will begin by configuring the angular project and installing dependencies:

ng new ngx-serverless-starter --style scss --routing true

cd ngx-serverless-starter

Let’s test the application by hitting:

ng serve

Test your application by navigating to http://localhost:4200

Set up an Angular Universal

Next, we will install Angular Universal for support SSR (server-side rendering).

The above command will install the necessary prerequisites and add new files to support the server-side rendering.

Run the following command to test your SSR application:

npm run build:ssr && npm run serve:ssr

Test your application by navigating to http://localhost:4000. If you view source the page, you will see <app-root> has real HTML elements:

View Source of Angular Universal Page

Install dependencies for Serverless

We will be using the “aws-serverless-express” wrapper of express for creating the AWS Lambda function. We’re also installing the “Serverless” framework which is a complete solution for building & operating the serverless infrastructure. It also has tools to simulate the Lambda on local that makes it easy for development.