Angular & Serverless

Deploy your Angular app to Firebase / AWS Lambda / Google Cloud Functions, using @ng-toolkit/serverless

Maciej Treder
May 21, 2018 · 4 min read

In this post I am going to show you how easy and quick can you deploy any Angular CLI project to the serverless environment, using @ng-toolkit/serverless library.

And yes! It make sense! Find out this demo PWA built with Angular Universal, deployed on AWS Lambda.


So you have your beautiful and robust Angular application. It’s time to deploy it and spread it to the world. Now the question comes. Where should I deploy? There is a bunch of options:

  • Traditional hosting
  • Dedicated server (like AWS EC2 or VPS)
  • Serverless environment

Today we will focus on the third one: Serverless environment. In my opinion, this is the best solution for startups and freelancers. You are paying only for what you are using and when you are using it. FaaS (Function as a Service) is running on the shared machines, launched only when customer request comes to the server and running as long as it is necessary to fulfill it. Most Serverless providers are charging you for number of performed requests, and execution time. Also, most of them are offering some free tier, ie. Amazon Web Services gives you 1 000 000 free requests monthly!

What @ng-toolkit/serverless will do for you, is review your application configuration to apply best solution for it. It will take a look inside angular.json file and based on it, setup necessary config, files and changes in the code.

Prerequisite

To make use of the library which we are going to apply for deploying, you need to have installed and configured CLI for the provider which you are going to use. Take a look at these guides to accomplish this:

I believe that you have NodeJS and Angular CLI installed. So let’s create a new project:

ng new serverlessApp
cd serverlessApp

You can also add server-side rendering (Angular Universal) support to it:

ng add @ng-toolkit/universal

@ng-toolkit/serverless

We won’t go forward with the whole set up manually. I believe that everyone more like the situation when setup is done for them, and they can focus on development.

To achieve that we are going to use newest CLI feature: ng addcommand combined with the external library @ng-toolkit/serverless.

Now you can choose your favorite provider.

AWS Lambda & Google Cloud Functions:

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

or

ng add @ng-toolkit  —-provider gcloud

After successfully updating your project you can check if it is working correctly on lambda, by typing:

npm run build:serverless:deploy

An URL to your app is attached to the command output:

Serverless: Packaging service...Serverless: Excluding development dependencies...Serverless: Compiling function "helloWorld"...Serverless: Uploading artifacts...Serverless: Artifacts successfully uploaded...Serverless: Updating deployment...Serverless: Checking deployment update progress....................................Serverless: Done...Service Informationservice: myappproject: another-project-197513stage: devregion: us-central1Deployed functionshelloWorldhttps://us-central1-another-project-197513.cloudfunctions.net/httpServerless: Removing old artifacts...

If you want, you can use a custom domain. Check out this step-by-step guide on how to set it up in AWS API Gateway. When your domain is successfully provisioned, you can deploy your app to production:

npm run build:prod:deploy

Firebase

Setup for Firebase is a little bit different, that’s why I decided to place it in the separate section.

First of all, you need to create a new project. Navigate to the Firebase Console and click on “Add project”. Type your project name, choose a region and (optionally) change project ID.

The project ID is used with the ng add command:

ng add @ng-toolkit/serverless --provider firebase --firebaseProject angular-project-495ef

After executing this command, you should be able to deploy your app to the firebase, by typing:

npm run build:prod:deploy=== Deploying to 'fir-test-7d7eb'...i  deploying functions, hostingi  functions: ensuring necessary APIs are enabled...functions: all necessary APIs are enabledi  functions: preparing functions directory for uploading...i  functions: packaged functions (490.22 KB) for uploadingfunctions: functions folder uploaded successfullyi  hosting: preparing functions/dist directory for upload... Warning: Public directory does not contain index.htmlhosting: 8 files uploaded successfullyi  functions: updating function http...functions[http]: Successful update operation.Deploy complete!Project Console: https://console.firebase.google.com/project/angular-project-495ef/overviewHosting URL: https://angular-project-495ef.firebaseapp.com

Check out @ng-toolkit project on GitHub


Thanks for reading!

Support @ng-toolkit project by starring it on GitHub, sharing with friends and placing a donation on OpenCollective or DonorBox or LiberaPay. Thank you!

In case of a bug, please report it on GitHub.

Maciej Treder, https://www.maciejtreder.com

Follow me on Twitter and GitHub to be notified about my new activities.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade