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

Follow RSS feed Like

3 Likes 2,475 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.

Install cloud connector, and add the subaccount of SAP Cloud Foundry to connector.
In the section of ‘Cloud to On-Premise’, add NWD system.
Open SAP Cloud Platform cockpit, and add destination to NWD in SAP Cloud Foundry.
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.
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.
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.

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": "./"
        }
	] 
}

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"
  }
}

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));

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!

Alert Moderator

1 Comment

You must be Logged on to comment or reply to a post.

Michelle Crapo

June 28, 2019 at 4:49 pm

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)
- Like(0)

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

Assigned tags

Related Blog Posts

Related Questions