Deploy an Angular application on AWS using serverless

A quick starter for a production ready Serverless Angular application on Amazon Web Services

Marco Zuccaroli

Published in

ITNEXT

4 min readApr 15, 2020

What is serverless

Serverless is a cloud based architecture that allows users to write and deploy code without worrying about the underlying infrastructure.

Cloud providers like AWS, Azure, or Google Cloud are responsible for executing the code by dynamically allocating the resources, this paradigm enables you to shift more of your operational responsibilities to the providers, letting you focus on the business logic.

The serverless approach is typically used for backend applications but we can take advantages of this architecture also for quickly deploy frontend applications.

The Serverless Framework

The Serverless Framework helps you develop and deploy your cloud resources, along with the infrastructure resources they require. It’s a CLI that offers structure, automation and best practices out-of-the-box.

Serverless works with several cloud provider but in this tutorial we will focus on Amazon Web Services.

Reference repository

A working example of the angular base project that we will use as example is available at: https://github.com/mzuccaroli/angular-serverless-starter:, it is a simple Angular project generated with angular CLI with the command “ng new”. For more information see the quickstart of an angular2 project.
You can use this project as a quick starter for your project.

You can read the Italian translation of this article on my company blog: “Pubblicare un’applicazione Angular su AWS usando Serverless” also written by me.

The original example

This tutorial is based on “aws node single page app via cloudfront” serverless example, we will adapt the serverless base example to an angular application. You can clone it for code references and custom adaptations.

Prerequisites

You will need Serverless installed globally your system:

$ npm install -g serverless

For more info see: https://serverless.com/framework/docs/getting-started/

You also need an AWS account, check the following link if you don’t have one: How to create an AWS account. Amazon offer a one year free tier that you can use and take great advantages of.

If you already have an AWS account be sure to have the right permissions for cloudfront, cloudformation and s3.

Build your application

Getting started

Create a base angular project with angular CLI if you don’t already have one by typing:

$ ng new

Follow the steps to scaffold your project with last versions on angular libs.

Once the Angular project is set up you can customize it to handle the serverless deploy.

Add the single page app plugin

go to the base example repository and start copying some useful files:

we will need the full serverless-single-page-app-plugin folder, copy it into your project root, this plugin will allow you to simplify the deploy experience. It’s not necessary to understand the plugin to deploy your Single Page Application.

Make available this plugin to your project by adding this to your package.json in the requirements section:

Install the serverless-dotenv-plugin

This will help you to handle the various environments and stages on your project

$ npm install serverless-dotenv-plugin

Notice that the dotenv plugin will need a.env file in your application root folder that is git-ignored. For more information take a look to the official docs.

Add the serverless.yml file

This file is the serverless deployment core, you can copy it from the main example and edit it or use the custom one in the reference repository

the main customizations are in the plugins custom and provider sections:

you will need to customize the s3Bucket value with a custom unique name, then use the angular dist folder as serverless dist folder and finally use the serverless-dotenv-plugin to be able to deploy on multiple stages.

Customize your gitignore

Be sure to add the .serverless folder to your .gitignore file by adding:

Build and deploy

Build

Be sure that your environment is set then perform the regular Angular build process:

$ ng build

The build artifacts will be stored in the dist/ directory. Use the — prod flag for a production build.

First deploy

Warning: Whenever you making changes to CloudFront resource in serverless.yml the deployment might take a while e.g 20 minutes.

In order to deploy the Application you need to setup the infrastructure first by running

$ serverless deploy

The expected result should be similar to:

After this step your S3 bucket and CloudFront distribution is setup. Now you need to upload your static files, aka your dist folder, to S3. You can do this by running

$ serverless syncToS3

The expected result should be similar to

Now you just need to figure out the deployed URL. You can use the AWS Console UI or run

$ sls domainInfo