Skip to Content
Technical Articles
Amy Li
Amy Li
June 28, 2019 2 minute read

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

Follow RSS feed
3 Likes 667 Views 1 Comment

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

Related Blog Posts

    Related Questions

      1 Comment
      You must be Logged on to comment or reply to a post.
      • 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)