Manage and deploy your UI5 apps with UI5FlowDev

UI5FlowDev is a simple node.js application with UI based on OpenUI5 libraries. It enables you to manage and run your UI5 applications on your local machine using a local server with reverse-proxy support. It also provides you the option to build your applications and deploy them to SAP NetWeaver ABAP.

 

Features

• Local development of UI5 applications using IDE of your choice
• Run your UI5 applications locally
• Deploy your application versions to SAP NetWeaver ABAP from your local machine without SAP Web IDE or Eclipse plugins
• Manage and build versions of your applications
• Simple OpenUI5 based user interface

 

Setup and Tutorial

In this short tutorial is presented a basic scenario of using UI5FlowDev with a simple UI5 application.

1. Installation and start

If you are familiar with npm package manager simply go to ui5flowdev and follow the installation instructions.

In case you never heard of npm, probably you will have to install node.js and then you can follow the instructions on ui5flowdev. UI5FlowDev is installed as global package, so it can be started from any path by typing ui5flow in your console.

On first start a simple command-line wizard asks you which HTTP port you want to use and in which directory should be the UI5FlowDev artifacts stored. Default port is 8001 and default location for the artifacts directory is C:\Users\<your user>\UI5FlowDev.

After successful setup your default browser with UI5FlowDev application starts automatically.

Your directory with UI5FlowDev artifacts has following structure:

• in the apps directory you store and maintain your UI5 applications
• in the versions directory contains automatically stored “builds” of your applications
• data directory contains settings and metadata files necessary to run the UI5FlowDev environment
  • apps.json contains the list of all your applications
  • reverseProxies.json contains the list of all your registered service proxies
  • sapSystems.json contains the list of all SAP Systems you use for your deployments.

UI5FlowDev provides UI interface to manage these settings files, so you don`t have to edit them directly.

 

2. Add new application

1.In the lower-right corner of the Applications list click the Add button.

2.Type Name and Description of your application.

3.Click the Save button in the lower-right corner of the dialog window.

In the Path input field you can see where your application will be stored.

After successful save you will be automatically redirected to your Application details.

 

3. Add application artifacts

With the application created you can copy your development resources to the root folder of your application. By clicking the Resources path link a path to the root directory will be stored in clipboard so you can simply do cd > paste to this directory on your local machine.

Clone the resources from the Gtihub repo simple-products-demo.git. into this directory using command

git clone https://github.com/ui5flow/simple-products-demo.git

or with help of any Git client.

After successful cloning of this repo in your directory the structure should look like this:

The UI5 application simple-products-demo uses Northwind OData service and refers to OpenUI/SAPUI5 resource using a relative URL. Relative URL of OpenUI/SAPUI5 resources in index.html file is quite often used in applications you need to develop and deploy on your SAP System, but it limits you to start the applications directly on your local machine (of course you can use any test index.html file to get around this problem). Another problem is related to OData(or any REST) requests where you are limited by the Same Origin Policy of your browser.

 

4. Adjust local URL of the application

Now you have your application artifacts ready to run in browser. But first you have to adjust local URL path.

1.Select application in the Applications list to display the details.

2.Select Properties tab.

3.Click the Change button in the lower-right corner.

4.Adjust the Local URL value so it points to the index.html file stored in the simple-products-demo/webapp directory.

5.Save your changes.

 

If you start the application now you will run into a problem:

The relative path to the SAPUI5/OpenUI5 libraries will not find anything on the URL defined in the application.

In next step we will set up a service proxies which will enable us to use reverse-proxy mechanism on our local server.

 

5. Create service proxy

1.Click the Settings menu button in the top-right corner.

2.Select Service Proxies.

3.Click the Add button in the lower-right corner of the Service proxies dialog.

Settings for the OpenUI5 Resources service proxy

Using this proxy, we will redirect the relative resources URL in our demo application to the OpenUi5 resources on the https://openui5.hana.ondemand.com.

In the definition part of service proxy provide following inputs:

Description: OpenUI5 Resources

• Description of the service proxy.

Target host: https://openui5.hana.ondemand.com

• Target host to which the service proxy request should be re-directed.

Path: /resources/

• Path which should be handled by the reverse proxy mechanism on the server.

Path rewrite (from): .+?/resources/

Path rewrite (to): /resources/

Path rewrite is suitable in cases when you need to change the original path to a path applicable on the target host. You can use regular expressions here. In our case we say using a regular expression to change ../../resources/ to /resources/ only.

Save this service proxy settings.

If you try to run your application now using the local URL you should see that the application has started in your browser.

But there is still the problem with the OData request:

We will resolve this problem with the service proxy definition for our OData service.

 

Settings for the OData service proxy

To redirect our OData requests to the right host we have to create another service proxy.

In the definition part of service proxy provide following inputs:

Description: Northwind.svc OData

• Description of the service proxy.

Target host: http://services.odata.org

• Target host to which the service proxy request should be re-directed.

Path: /V4/Northwind/Northwind.svc/

• Path which should be handled by the reverse proxy mechanism on the server. In this case we are creating service proxy for the path defined for our OData service in the manifest.json file of our demo application.

Save this service proxy settings.

If you try to run your application now using the local URL you should see that the application has displayed some customer contacts.

Service proxies you have created in this step are now available for all the applications you will run using UI5FlowDev, so you can use the same service proxy definition in several applications.

 

6.Do your development

Development phase. You can change or add something to the source code of your app. It`s up to you. Simply check all your changes using the Local URL of your application.

 

7. Create application version

In case you are finished with your development and want to build (create Componet-preload.js file) and deploy your application, you have to create a application version. Created application version is stored in separate directory so you can find your previous development objects anytime in the future.

1.Select application in the Applications list to display the details.

2.Select Versions tab.

3.Click the Create button in the lower-right corner.

4.Type Version name and Description of new version.

5.Root directory enables you to select the right directory in the directory structure of your application for the application version. Generally, the Root directory should contain index.html and Component.js file.

By clicking the Apply button without selecting any subdirectory, the root folder will be selected. Navigation between subdirectories and their parent is possible using the Selected root path breadcrumbs.

6.UI5 Application build provides you an option to automatically generate the Component-preload.js file.

Precondition of successful generation of Component-preload.js file is the identification of Component path in the Component.js file. Component.js file has to be located in the selected Root directory. In case the Component.js file cannot be located, or the Component path cannot be extracted from the Component.js file, there is an option to type the Component path manually.

 

 

7.Click the Save button in the lower-right corner of the dialog.

Application version is created and displayed in the List of available application versions. Generated version is stored in the versions directory of your UI5FlowDev development artifacts structure.

If we start the application using the URL link, the message with missing Component-preload.js file will not appear anymore.

 

8. Create SAP System connection

1.Click the Settings menu button in the top-right corner.

2.Select SAP Systems.

3.Click the Add button in the lower-right corner of the SAP Systems dialog.

Type Description of the SAP System connection.

Type Application server URL of the SAP System connection. E.g. https://yoursapserverhost.com

This URL should be accessible from your browser using a Basic authentication. Usually it points to a SAP Gateway system. In order to check if your access to the ADT services works, try to access https://yoursapserverhost.com/sap/bc/adt/discovery. In case you cannot access the ADT services, please review ICF settings on the SAP system. Better option how to check the access to your SAP system is by using any REST client which gives you better control over HTTP request headers.

BSP Application URL pattern is predefined URL pattern of your application on the SAP System. This pattern is used to generate links to your application on SAP system deployed from UI5FlowDev.

4. Click the Save button in the lower-right corner of the dialog. SAP System connection is created and displayed in the list of SAP System connections. SAP System connection is used in the deployment process of your UI5 applications.

 

9. Deploy application version

In this step you can deploy your application to SAP Netweaver ABAP.

1.Select application in the Applications list to display the details.

2.Select Versions tab.

3.Select version you want to deploy.

4.Click the SAP Deploy button in the lower-right corner.

5.Select SAP System in the value help dialog.

6.Type your User and Password in the Authentication dialog. Use the user you use to login to the selected SAP System.

In case the login fails, please review your connection settings (VPN Connection, etc.)

7.Choose if you want to deploy a new application or re-deploy an existing application.

In case of Re-deploy of existing application, select your application from the BSP Application name value help dialog. In the Transport value help select a transport in which you want to store your objects after deploying to SAP System.

In case of Deploy new application, type BSP Application name and Description of the BSP application, select Package in the value help dialog and select Transport in the value help dialog.

8.Click the Deploy button in the lower-right corner.

9.Review the list of objects to be deployed to the SAP system.

10.Click the Deploy button in the lower-right corner.

After successful deployment check your BSP application on the SAP System. In the List of available application versions a message box with information about the deployment is displayed.

 

10. Publish & Share your application on UI5Flow

In case you have created any application you would like to publish and share with everyone without access limitation of SAP Netweaver, you can do so simply by sharing it on UI5Flow.com platform.

Simple user guide how to use it can be found here.