Skip to Content
Technical Articles
Author's profile photo Amy Li

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!

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Michelle Crapo
      Michelle Crapo

      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)

      Author's profile photo shruthi umashankar
      shruthi umashankar

      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.

      Author's profile photo Mariangela Di Luccia
      Mariangela Di Luccia

      Hi, have you solved this problem?

      Author's profile photo shruthi umashankar
      shruthi umashankar

      Hi,

      applications:
      - name:******App
        path: dist
        memory: 512M
        disk_quota: 1024M
        buildpacks: 
          - https://github.com/cloudfoundry/staticfile-buildpack
      

      I used the above manifest.yml, and was able to deploy sucessfully.

      Hope this helps.

      Regards,

      Shruthi

      Author's profile photo Mariangela Di Luccia
      Mariangela Di Luccia

      Thanks for the instant reply.
      And with this

       buildpacks: 
          - https://github.com/cloudfoundry/staticfile-buildpack

      were you also able to connect to your odata service?

       

       

       

      Author's profile photo Arnab Datta
      Arnab Datta

      Hi all,

      Useful blog with lots of information.

      Points to be noted. If you use staticfile-buildpack it will not work. If you need to use xsuaa and app router you need to use nodejs_buildback.