Deploying Angular app to IBM Cloud

Angular is one of the best framework to create Front End Application, whether it is small or Enterprise level project Angular is one of the best framework to create it but Deployment also one of the major point that we need to take care of it.
So when it is come to deployment there lot of major cloud providers are there like Google Cloud Platform, Azure, AWS, IBM Cloud etc. So in this post we will discuss how to deploy an Angular Universal project in IBM Cloud and we will choose IBM cloud Fundry to deploy the Angular 10 application by using Docker image. So lets get started.

Create Angular Application with Routing

So First we will create an Angular application by using Angular CLI and we also create root level routing at the time creating the Angular Project. So just give this below command to create an Angular project with default routing. So suppose we give theapp name community.

ng new community — routing

Create Angular Universal Using Nest JS and Add PWA

Now we will create Angular Universal or Angular Server Side application using Nest JS, So there is specific schematics which will create an Angular 10 Universal project using Nest JS as backend and below is the schematics to create Angular Nest Universal

ng add @nestjs/ng-universal

To create a Progressive web application or PWA project just use this below schematics.

ng add @angular/pwa

After creating Angular 10 Universal project, we can see three commands in package.json file correspondingly given below.

“dev:ssr”: “ng run community:serve-ssr”, 
“serve:ssr”: “node dist/community/server/main.js”, 
“build:ssr”: “ng build — prod && ng run community:server:production”, 
“prerender”: “ng run community:prerender”,

dev:ssr will be used to run your front end and backend universal or server side rendered application in one port locally. Below are two links where your Angular Front End and Nest JS backend will run.

Front End Angular app - http://localhost:4200/
Back End Nest.JS App - http://localhost:4200/api/

build:ssr will be used to create production build file for Angular Nest universal project and serve:ssr will be used to run Angular Nest ssr project and prerender will be used to create Angular prerender application.

Create Docker File and Manifest File

Now we will create a manifest.yaml where we will define the configuration of IBM cloud foundry application and code snippest is given below. You can change the memory to any other values but for free tier you can use maximum 256 MB memory in IBM Cloud Fundry.

— — applications: — name: community random-route: true memory: 256M

After creating this one we will add a docker file in project root folder to create an Docker Image which will be deployed to IBM Cloud Foundry. So below is the command to create a Docker image for Angular universal project.

FROM node:6-alpine

ADD package.json /app
RUN cd /app; npm install
RUN cd /app; npm run build:ssr 
ADD dist /app/dist 
ENV NODE_ENV production
ENV PORT 8080
EXPOSE 8080 
WORKDIR “/app”
CMD [ “npm”, “start” ]

This is the docker file which is needed to create a Docker image. So First we are selecting the node version and then adding the package.json to /app folder and then we are installing the node modules by using npm install.

After that we are creating production build file for Angular Universal project using npm run build:ssr command and then we expose the docker url in 8080 port and then are starting the node application using npm strart. So we need to change the npm start command in package.json file like given below.

"start": "npm run serve:ssr",

After those steps we are all set write now your Angular Universal is ready to deploy in IBM Cloud Fundry. So just use the IBM CLI commands to deploy the Angular Universal Application to IBM Cloud Fundry.