Deploying a Server less Angular app

Deploying Angular Serverless

Introduction

Serverless: Serverless is a big leap for the deployment of the application. In the simplest terms I would describe serverless as a service which is highly available and you pay for the exact execution time of the service. Yes!!! You heard it right. No dedicated server infrastructure, No up-front costs and you are also Not paying for the time your application is not used.

Some of the most popular serverless platform providers are AWS Lambda, Google cloud functions, Azure functions etc. This article particularly focuses on AWS.

Goal: After reading this article you will be able to deploy your Angular application on AWS S3 (assuming you already have Angular app ready and all the node setup available).

Create an AWS account

Go to AWS console and crate an account if you are not having one. You can have free access for 1 year on AWS platform. Please refer to the free tier pricing details.

Create an AWS account

Create an IAM user.

Once you are done with setting up you are AWS account, Go to services from the top menu, and click IAM.

Select Programmatic Access from the wizard. From the permissions wizard, attach the AdministratorAccess policy and create the user. Download the Access keys and Secret access keys (you will need this for serverless setup).

Create IAM user

Setup Serverless

Follow the steps below in order to setup angular app for serverless.

1. Install Serverless module by running

npm install -g serverless

2. Configure serverless to use AWS service by running

serverless config credentials --provider aws --key <YOUR_KEY> --secret <YOUR_SECRET>

Setup Angular for Serverless

Go to root of you angular application and run

ng add @ng-toolkit/serverless --provider aws

For those who are unaware of ng add command, please refer to this link.

Running above command will add a whole lot of commands to the scripts in the package.json file as given below.

"build:browser:prod": "ng build --prod",
"build:browser:serverless": "ng build --prod --base-href /production/",
"build:serverless": "npm run build:browser:serverless && npm run build:server:serverless",
"build:prod": "npm run build:browser:prod && npm run build:server:prod",
"server": "node local.js",
"build:prod:deploy": "npm run build:prod && npm run deploy",
"build:serverless:deploy": "npm run build:serverless && npm run deploy",
"deploy": "serverless deploy",
"build:server:prod": "webpack --config webpack.server.config.js --progress --colors",
"build:server:serverless": "webpack --config webpack.server.config.js --progress --colors"

Finally run

npm run build:serverless:deploy

This will create a build for the serverless and deploy a zip to the S3 bucket in your account and provide you the link to access the app as shown in below snap.

Thanks for reading out the post.

I will try to add variations on serverless like deploying to specific region, providing domain name for the url etc. in the coming posts.

References

Serverless Framework - AWS Lambda Guide - Credentials

@ng-toolkit/serverless