Deploy Angular Application(with on-premise backend) to SAP Cloud Foundry

In my last blog post, I tried to build Angular application with SAP Fiori Fundamentals.

https://blogs.sap.com/2019/06/24/build-angular-application-with-sap-fiori-fundamentals/

In this blog post, I will connect Angular application with on-premise ABAP system, and deploy it to SAP Cloud Foundry. I used ‘NWD’ as my ABAP system, and my Angular project is named ‘fiori-angular’. Below is the steps.

1. Install cloud connector, and add the subaccount of SAP Cloud Foundry to connector.
2. In the section of ‘Cloud to On-Premise’, add NWD system.
3. Open SAP Cloud Platform cockpit, and add destination to NWD in SAP Cloud Foundry.
4. In CF cockpit, we need to create 3 service instances, including connectivity, destination and xsuaa. They can be created in Service Marketplace: Connectivity, Destination, Authorization & Trust Management. Please be noticed that donnot bind any applications in these 3 instances.
5. In Angular application, make sure you are in root folder of the project, then type in command:

   ng build --prod​

   this will build the Angular application and put the built-files in to /dist/fiori-angular folder.

6. In order to deploy this application to SAP Cloud Foundry, you need to add a manifest.yml file under folder /dist/fiori-angular/. Add below content:

   applications:
   - name: fiori-angular
     memory: 512M
     disk_quota: 1024M
     instances: 1
     buildpack: nodejs_buildpack
     services:
       - destination_service
       - uaa_service
       - connectivity_service​

   Notice: we need to use buildpack ‘nodejs_buildpack‘. I tried to use ‘staticfile_buildpack’ at first, then SAP Cloud Foundry will not parse configuration files like xs-app.json.

7. Add file ‘xs-app.json’ under folder /dist/fiori-angular/, and add below content:

   { 
   	"routes": [ 
   		{
               "source": "^/sap/opu/odata/",
               "authenticationType": "none",
               "destination": "NWD",
               "csrfProtection": false
           },{
               "source": "/*",
               "localDir": "./"
           }
   	] 
   } ​

8. copy package.json file from root folder to /dist/fiori-angular, and make sure the following points are updated:

   {
     "name": "fiori-angular",
     "version": "0.0.0",
     "scripts": {
       ...
       "start": "node node_modules/@sap/approuter/approuter.js",
       ...
     },
     ...
     "dependencies": {
       ...
       "@sap/approuter": "5.1.0"
     },
     "devDependencies": {
       ...
       "@sap/grunt-sapui5module-bestpractice-build": "^0.0.14"
     }
   }
   ​

9. You can consume the on-premise odata service in Angular project:

   interface Product {
     ProductID: string,
     TypeCode: string,
     Category: string,
     Name: string,
     Description: string,
     SupplierID: string,
     SupplierName: string,
     CurrencyCode: string,
     Price: string,
     MeasureUnit: string,
   }
   ...
   private productServiceURL = "/sap/opu/odata/iwbep/GWSAMPLE_BASIC/ProductSet?$format=json";
   public products = [];
   ...
   this.http.get<Product[]>(this.productServiceURL)
               .subscribe(function(response){
                 this.products = response.d.results;
               }.bind(this));​

10. OK, now the project is ready to deploy. Type below commands in CLI one by one:

    cf api https://api.cf.eu10.hana.ondemand.com​

    cf login

    cd dist\fiori-angular

    cf push

After above steps are completed, you can find your application in SAP Cloud Foundry.

Run it!

With these 2 blog posts, I’m exciting that there is a solution for customer when they want to use Angular as Web Framework and connect to On-Premise backend. And at the same time, keep the Angular looks like a Fiori app, to keep the consistent style among all of the web applications.

Welcome to comment and suggestions!