Deploy an Angular application on AWS using serverless

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

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.

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

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

The expected result should be similar to

Serverless: Web App Domain: dyj5gf0txxyyzz.cloudfront.net

Visit the printed domain domain to see your application.

It should automatically redirect you to HTTPS.

Re-deploying

If you make changes to your Single Page Application you don’t need to re-deploy the full stack, you only need to upload the new files to s3 and invalidate CloudFront’s cache to make sure new files are served.

Run:

$ serverless syncToS3

To sync your files and then:

$ serverless invalidateCloudFrontCache