Angular & Serverless
Deploy your Angular app to Firebase / AWS Lambda / Google Cloud Functions, using @ng-toolkit/serverless
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!
@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.
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
ng add @ng-toolkit/universal
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
Now you can choose your favorite provider.
AWS Lambda & Google Cloud Functions:
ng add @ng-toolkit/serverless —-provider aws
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
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 uploading✔ functions: functions folder uploaded successfullyi hosting: preparing functions/dist directory for upload...⚠ Warning: Public directory does not contain index.html✔ hosting: 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!
In case of a bug, please report it on GitHub.
Maciej Treder, https://www.maciejtreder.com