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!

2 Comments
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)

  • Hi,

    I  followed the above steps to deploy my Angular Application with on-premise as backend to SAP Cloud Foundry.

    When I execute cf push command, I am facing this error:

    -----> Building dependencies
    Installing node modules (package.json)
    Error staging application: App staging failed in the buildpack compile phase
    FAILED

    Can you please help me resolve this error. If its related to node version, please let me know how to determine the correct one.