Skip to Content
Technical Articles

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!

1 Comment
You must be Logged on to comment or reply to a post.
  • I can’t wait to do this!!!   Slowly we are getting the technical side up and running.  Next stop for us is cloud connectors.  (On-premise of course)