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

[amy_li04]

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!