I tried out the new feature, but it took more time than expected. One issue has been, that the sap grunt script does not run correctly on linux and therefore our automated CI build process was not able to deliver everything as expected. The issue is reported here and confirmed by SAP.
Finally i thought it would be good, to have a working example and i started to create an example app. Doing this i realized, that maybe my whole developing workflow should be part of this project and the example started to grow.
 |
| CacheBuster on SCP |
Ready Developer One: develop, build, deploy!
Click "here" to read the full blog!
Starting some years ago with UI5 and Eclipse as IDE, i liked the features of the SAP Web IDE, but to be honest, this tool was sometimes horrible slow and sometimes after the regularly 14days innovation updates, the plattform was not available for half a day. This was the time, were a collegue off mine started to shift his developments from Web IDE to PhpStorm, but with the focus to be compatible with the neo environment.
This was the birth of localneo, a node based proxy that handles routes from neo-app.json and allows local solving of destinations using a destinations.json file. From that time on, he was able to develop locally in his PhpStorm, having a local preview http server that handles /resources, odata destinations and everything else automatically.
Right now, most of my collegues are moving back to develop locally using the JetBrains IntelliJ Platform, at least the WebStorm for modern JavaScript Development. This is because the SAPUI5 plugins for eclipse has been deprecated and there is a much better support for all this new build tools like grunt, npm or nodejs and the git integration is very handy.
What does this mean for my daily work? I have projects depending on our custom PHP Framework using OpenUI5, then the regular SAP Fiori App development where apps are deployed on AS ABAP and cloud projects, where UI5 is deployed directly on the cloud. For some clients i am still developing on Web IDE, but this is mostly focused on easy access to the BackEnd using the destinations via CloudConnector. In all other cases, where i have direct access to the backend api (maybe using a VPN tunnel) i am using IntelliJ.
Do i still need SAP Web IDE? This depends on you scenario and environment! From my perspective, the answer is yes, because most innovations will first been seen in th Web IDE, especially in the templates and plugins. This are features, that sometimes are even not documented. While extending a Fiori App, i had to extend the existing oData service using the UI5 extension mechanism. But how to figure out the correct configuration inside manifest without debugging the SAP scaffold app. Luckily there was an wizard inside SAP Web IDE, that exactly does this for you. Also the whole UI5 extension mechanism is much more handy and useable using tools instead of doing this handcraftet. So the answer is, depending on your knowledge and your target platform or technology, SAP Web IDE will help you very much (maybe only for learning purposes). If it comes to custom control development or using Smart Elements (currently not supported by layout editor) the benefits has been gone.
Local UI5 development on SCP (Best Practise)
Even if i am developing for the SCP, i am still using my local development environment (PhpStorm) for stability, performance and modern development tools support.
 |
| PhpStorm with opened CacheBuster project |
The CacheBuster template contains everthing, that is neccessary to do all this tasks locally. For further detailed information you should also have a look into the README.md file. The readme explains all the prerequisites that are needed to work with the tools. This blog should only demonstrate the workflow inside PhpStorm (similar in WebStorm) called IDE, that is used to develop apps.
If you have cloned the repo and opens the project inside IDE, you have to install the packages.json dependencies running npm install. If your IDE is configured using nodejs, that will be suggested automatically (also on updates on packages.json).
 |
| IDE package.json install/update |
Test
During development, you generally need a http web server that serves your application and in most situations you need a backend system that is included using a proxy to get this api service inside the same uri of your webserver. On SCP this proxy setup is configured inside the neo-app.json file.
 |
| neo-app.json |
The "/resources" section is pointing out to the used SAPUI5 version linked in your index.html file, referenced as src="../../resources/sap-ui-core.js". This is automatically resolved by the SCP using the project settings. You can select the most up-to-date sapui5 version or select a dedicated one like 1.52.9. This is useful, if your later deployed app is running onPremise AS ABAP and the system uses SAPUI5 1.52.9, so you can make sure you have the same environment like your server.
Another section is the one with the name "NorthwindOData". This one uses exactly the SCP connectivity destination with this name.
 |
| SCP Destination: NorthwindOData |
To be able to mimik this behavior offline, my collegue #themasch has created a cool node based utility called "localneo". The localneo offers a web server, that delivers the core libary (sapui5 or openui5) under the "/resources" path and also handles destinations excatly the same way, SCP does. It reads the neo-app.json to get to know the service (proxy) endpoints (routes) and is controlled by a local file calles "destinations.json". This file setups localneo and also declares to destinations, because inside SCP they are not part of the project itself.
 |
| destinations.json |
destinations.json
- server
- You can configure your host/port and open will automatically open the uri inside your default browser.
- service
- controlls using the most up-to-date sapui5 or openui5 from CDN or a hardcoded (maybe local) one.
- destinations
- the target paths for used destinations inside neo-app.json. You can declaratively use a hardcoded BasicAuth user/password.
Serve
The included serve task starts the localneo server using the configuration inside destinations.json. It can easily launched using the npm window (open by right click on packages.json and "Show npm Script").
 |
| npm task launcher window |
 |
| runner bar |
The script start the local neo and opens youor default browser with the configured uri
 |
| serve task |
Now you have a working and lightning fast (competed to SCP) webserver, that serves your web app by relative access to CDN UI5 version and also be able to access NorthwindOdata destinations the same way as done inside SAP Web IDE using SCP destination. Code changes will directly be reflecting after reloading the app in the browser.
Concerning CacheBuster, the app is currently not using the used/declared CacheBuster functionality, because this file is missing in the /webapp folder. Therefore the app false back to the generall behavior of loading it the classic approach. The needed CacheBusterInfo.json will be generated during build process.
Build
If you have successfully developed your app and tested it in the browser, you can use the build task to generate the productive version of your code.
The build process produces a new build output in the ./dist folder of your project that is ready and optimized for better performance in the productive environment. The following tasks are executed during the build:
- Minification of .css files.
- Minification of JavaScript files (minified files).
- Copying of the original files to the dist folder with -dbg suffix added for debugging purposes.
- Generation of the Component-preload.js and Component-preload-dbg.js preload files for the debug and minified files.
- Minification of the preload file.
- Generation of the CachebusterInfo.json file.
- Generation of the changes-bundle.json file. The file contains a collection of all the changes that are made to an SAP Fiori element application and are located in the changes folder.
Deploy
If your builded app is running as expected, you maybe wants to deploy the application to the SCP. This can be done by using the deploy task. The task is using the MTA Archive Builder to produce an mtar (Multi Target Archive) configured via mta.yaml as html5 container and then deploying this file to the SCP using SAP Cloud Platform Neo Environment SDK. The tools are provided by SAP and needs to be copyied into the /ci/tools folder of the cachebuster project to be used.
 |
| CI tools |
The archive builder is included in the "mta.jar" container (renamed after download from SAP One Support Launchpad). The Neo SDK needs to be copied to the folder "neo-java-web-sdk" (here i stripped off the whole package by deleting samples, etc.). Finally you have to enter your SCP account settings inside "deploy-mta.properties" to be able to deploy to SCP.
Continous Integration and Delivery (CI / CD)
As desribed in the CI Best Practices Guide – SAPUI5/SAP Fiori on SAP Cloud Platform, instead of doing this tasks manually, you can also push this tasks to a runner/pipeline. We are using gitlab and all this build / deploy stuff is done automatically after committing new sources. That means, i only need localneo for local development and testing and then i will commit my working changes to gitlab. Gitlab has a defined pipeline using a clean docker image with linux environment to build the app and deploy to SCP or AS ABAP or our open source based PHP runtime. This makes it even possible for small changes/fixes to directly do this changes inside gitlabs browser based code editor and commit it to reflect changes directly on dev system (this is useful maybe if customer wants to do changes in i18n files, which automatically leads to an build/deploy process for the dev system landscape.
Special Thanks
To be able to do everthing as described in my blog, special thanks goes to:
- Mark #themasch Schmale (for providing the incredible localneo)
- Peter Müssig (for bringing async support to CacheBuster)
- All the guys working on SAP CI tools like Wolfram Kramer, Alex, #avizov
- Gregor Wolf for pushing CI especially for onPremise ABAP
Resumee
This can be seen as my private best practise guide on developing UI5 on SCP and maybe you are using other tools and techniques. For developers, who are looking for an alternative approach to SAP Web IDE but still beeing compatible, if team members still use it, this is maybe the approach of yout choice. This project with the included setups can be a time saver. Finally, maybe you only want to use the localneo (if you wants to be compatible with neo environment).You definitely should also have a look into the brand new ui5-tooling project, which will bring you building functionality like Standalone App, but currently not every part is available in public repos.
The sources for this project can be found in my GitHub CacheBuster repository.
No comments:
Post a Comment
Thank you for your comment!
The comment area is not intended to be used for promoting sites!
Please do not use such links or your comment will be deleted.
Holger
Note: Only a member of this blog may post a comment.