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