SAP Fiori Tools: Deploy to ABAP server

[jhodel18]

In my previous blog post SAP Fiori Tools - SAPUI5 Freestyle App, I've shown how to set up a SAPUI5 Freestyle App using SAP Fiori Tools. After you have finished building and testing your UI5 app, the next logical thing to do is prepare it for deployment. In this blog post, I will show how to deploy a SAPUI5 App to the ABAP server using SAP Fiori Tools.

 

 

Prerequisites

---

• SAP Business Application Studio


• Visual Studio Code with SAP Fiori Tools extension installed


• ABAP server (in this demo, I'm using S/4HANA)


• The OData Service to Load Data to the SAPUI5 ABAP Repository is activated

 

UI5 Tooling

---

As I've already mentioned in my previous blog post, UI5 Tooling is one of the many tools behind SAP Fiori Tools. UI5 Tooling is also responsible for deploying the UI5 App to multiple target systems, including the ABAP server.

If you are still using the SAPUI5 Tools for Eclipse, then you should read this blog post -- SAPUI5 Tools for Eclipse – Now is the Time to Look for Alternatives. In short, SAPUI5 Tools for Eclipse has been officially retired. And while SAP WebIDE can still be used to deploy UI5 App to ABAP server, SAP has been promoting the next generation IDE which is SAP Business Application Studio, and therefore, its use for deploying UI5 App to ABAP. And from SAP Business Application Studio, the tool that is used to deploy the UI5 app is the UI5 Tooling.

To sum it up, we are already in the 3rd generation of SAPUI5 Tools in the form of UI5 Tooling. And through this tool, you can utilize it by using your preferred development IDE. While this tool opens up the possibility to be used with the IDE of your choosing, it may be not so straight-forward to use for those who are very used to using SAP WebIDE. Hence, I've created this blog post, to show how it can be used to deploy your UI5 App to the ABAP server.

 

Deploy to ABAP server

---

The base project for this demo is the solution from my previous blog post -- SAP Fiori Tools - SAPUI5 Freestyle App. If you followed through the demo on that blog post, then you're good to proceed with the steps detailed in this blog post. But in case you didn't have the solution, you can find the solution in the link below:

https://github.com/jcailan/cap-samples/tree/blog-fiori-tools

However, you need to make sure that you have installed modules if you are using the Visual Studio Code. Now, with the base project ready, let's start the deployment process.

• 1. Inspect the scripts inside the package.json file. The initial state of the package.json have the deploy script looking like below:

"deploy": "fiori add deploy-config"

As you can see, if you run the deploy script, it will execute the command and generate the deploy config.

• 2. Execute the deploy script on the command line:

> npm run deploy

Note:

On your terminal, you need to be inside the gwsample folder before you execute the command -- npm run deploy.

You will be prompted to answer the information like ABAP Package and Transport Request number -- see below screenshot for more details:

Notice that the deploy script in package.json has been updated with:

"deploy": "ui5 build preload --config ui5-deploy.yaml"

Also, ui5-deploy.yaml file has been created. This serves as the deployment descriptor for the UI5 app.

specVersion: "1.0"

metadata:

  name: "gwsample"

type: application

ui5Theme: sap_fiori_3

builder:

  customTasks:

    - name: deploy-to-abap

      afterTask: generateVersionInfo

      configuration:

        target:

          url: http://sample.host.com:8000

        app:

          name: gwsample

          package: Z_DEMO_UI5_TOOLING

          transport: <your.transport.request>

• 3. Update the deployment descriptor ui5-deploy.yaml file with the configuration for your server credentials. And also make sure that the name of the app starts with Z or Y for the customer namespace (every ABAPer should already know this).

specVersion: "1.0"

metadata:

  name: "gwsample"

type: application

ui5Theme: sap_fiori_3

builder:

  customTasks:

    - name: deploy-to-abap

      afterTask: generateVersionInfo

      configuration:

        target:

          url: http://<your server hostname>:<port> # <-- modify this

          client: <development client> # <-- modify this

          auth: basic

        credentials:

          username: env:UI5_USERNAME

          password: env:UI5_PASSWORD

        app:

          name: zgwsample # <-- modify this

          package: Z_DEMO_UI5_TOOLING

          transport: <your transport request from previous step>

You can follow through the changes from the template above, but keep the credentials section unchanged because we will define UI5_USERNAME and UI5_PASSWORD as environment variables in the next step. We are doing this because you don't want your username and password to be part of the project files that you commit to git.

• 4. Create the .env file that will contain the values of environment variables UI5_USERNAME and UI5_PASSWORD. The file should have below entries:

UI5_USERNAME=<your username>

UI5_PASSWORD=<your password>

Note:

This .env file shouldn't be committed to git, therefore, create an entry for this file in your .gitignore file to make sure that it doesn't get committed to git. If you're not using git then you can ignore this step.

• 5. Now that the deployment setup is complete, it's time to execute the deploy command again:

> npm run deploy

If everything executed smoothly, you will get a series of logs printed in the terminal, and it will end with the following messages:

info builder:custom deploy-to-abap Deployment Successful.

info builder:builder Build succeeded in 20 s

info builder:builder Executing cleanup tasks...

Note that before the actual deployment, the tool builds the UI5 project first and do the minification of UI5 files and the generation of the *preload.js files. So the tool is already taking care of all the best practices build process before the actual deployment.

 

Test the Deployed UI5 App

---

• 1. Go to SICF tcode and search for your app by using the app name as the value for the service name. Once found, test the app by right-clicking on the ui5 app node and click on test service. This will launch the URL of your UI5 app, and you should see the below results:

That's it! You've deployed a SAPUI5 App using SAP Fiori Tools / UI5 Tooling!

 

Closing

---

Now you see how easy it is to deploy a SAPUI5 App using the new UI5 Tooling. Hopefully, this blog post can help you with transitioning from your current preferred tool into using this new SAPUI5 Tooling.

The beauty of this tooling is openness because you can use it on your preferred IDE. And to further ease your transition, I suggest for you to gain a basic understanding of Node.js runtime (if you haven't acquired this yet).

 

~~~~~~~~~~~~~~~~

Appreciate it if you have any comments, suggestions, or questions. Cheers!~

[lukasgreilinger]

Hi benjamin_k

thanks a lot for your posts and the info. I will try it! 🙂

br, Lukas

[athavanraja]

check this thread.

Upload canceled, archive could not be read or appears to be empty | SAP Community

the deploy script in package.json is the culprit

"deploy": "ui5 build preload --clean-dest --config ui5-deploy.yaml --include-task=generateManifestBundle generateCachebusterInfo && rimraf archive.zip",

This is wrong. If I just replace it with the below all goes fine

"deploy": "npm run build && fiori deploy --config ui5-deploy.yaml",       

Regards

Raja

[uvinay9879_6]

Hi,

I have tried the steps mention here in the accepted answer but I am still getting the error.

Error:

info builder:custom deploy-to-abap Create Archive

info builder:custom deploy-to-abap sap-ui-cachebuster-info.json added

info builder:custom deploy-to-abap utils/locate-reuse-libs-dbg.js added

info builder:custom deploy-to-abap test/flpSandboxMockServer.html added

info builder:custom deploy-to-abap test/flpSandbox.html added

info builder:custom deploy-to-abap test/changes_preview.js added

info builder:custom deploy-to-abap test/changes_preview-dbg.js added

info builder:custom deploy-to-abap test/changes_loader.js added

info builder:custom deploy-to-abap test/changes_loader-dbg.js added

info builder:custom deploy-to-abap resources/sap-ui-version.json added

info builder:custom deploy-to-abap localService/mockserver.js added

info builder:custom deploy-to-abap localService/mockserver-dbg.js added

info builder:custom deploy-to-abap localService/metadata.xml added

info builder:custom deploy-to-abap localService/ZUI_C_TRAVEL_M_00001_VAN.xml added

info builder:custom deploy-to-abap i18n/i18n.properties added

info builder:custom deploy-to-abap annotations/annotation.xml added

info builder:custom deploy-to-abap manifest.json added

info builder:custom deploy-to-abap manifest-bundle.zip added

info builder:custom deploy-to-abap index.html added

info builder:custom deploy-to-abap Component.js added

info builder:custom deploy-to-abap Component-preload.js added

info builder:custom deploy-to-abap Component-dbg.js added

info builder:custom deploy-to-abap utils/locate-reuse-libs.js added

info builder:custom deploy-to-abap Starting Deployment.

ERR! builder:custom deploy-to-abap Request failed with status code 400

ERR! builder:custom deploy-to-abap SAPUI5 application ZTRAVELAPP00001 was not uploaded or registered successfully

ERR! builder:custom deploy-to-abap SAPUI5 application ZTRAVELAPP00001 was not uploaded or registered successfully

ERR! builder:custom deploy-to-abap ***** Upload of SAPUI5 App or Library from ZIP-Archive into SAPUI5 ABAP Repository *****

ERR! builder:custom deploy-to-abap 

ERR! builder:custom deploy-to-abap Running in regular mode, brief log

ERR! builder:custom deploy-to-abap 

ERR! builder:custom deploy-to-abap 22 Files found in Archive.

ERR! builder:custom deploy-to-abap 

ERR! builder:custom deploy-to-abap * Parameters *

ERR! builder:custom deploy-to-abap 

ERR! builder:custom deploy-to-abap The text files are identified using the standard settings.

ERR! builder:custom deploy-to-abap The binary files are identified using the standard settings.

ERR! builder:custom deploy-to-abap The files and folders to be ignored are determined from the built-in standard settings.

ERR! builder:custom deploy-to-abap The name of the SAPUI5 repository "ZTRAVELAPP00001" has been determined from the corresponding import parameter.

ERR! builder:custom deploy-to-abap The description of the SAPUI5 repository has been determined from the corresponding import parameter.

ERR! builder:custom deploy-to-abap The package of the SAPUI5 Application "$TMP" has been determined from the corresponding import parameter.

ERR! builder:custom deploy-to-abap Transport Request "TRLK901073" has been determined from the corresponding import parameter.

ERR! builder:custom deploy-to-abap The external Code Page Name "UTF8" has been determined from the corresponding import parameter.

ERR! builder:custom deploy-to-abap The acceptance of Unix style end of line markers in text files has been determined from the corresponding import parameter.

ERR! builder:custom deploy-to-abap Unix style end of line markers in text files get accepted.

ERR! builder:custom deploy-to-abap The delta mode has been turned on.

ERR! builder:custom deploy-to-abap 

ERR! builder:custom deploy-to-abap * Creating new SAPUI5 ABAP repository ZTRAVELAPP00001 *

ERR! builder:custom deploy-to-abap You are not authorized to create

ERR! builder:custom deploy-to-abap Upload canceled: SAPUI5 ABAP repository has not been created (successfully).

ERR! builder:custom deploy-to-abap 

ERR! builder:custom deploy-to-abap SAPUI5 application ZTRAVELAPP00001 was not uploaded or registered successfully

ERR! builder:custom deploy-to-abap 

ERR! builder:custom deploy-to-abap * Done *

ERR! builder:custom deploy-to-abap SAP_Transaction: For backend administrators: use ADT feed reader "SAP Gateway Error Log" or run transaction /IWFND/ERROR_LOG on SAP Gateway hub system and search for entries with the timestamp above for more details

ERR! builder:custom deploy-to-abap SAP_Note: See SAP Note 1797736 for error analysis (https://service.sap.com/sap/support/notes/1797736)

ERR! builder:custom deploy-to-abap Deployment Failed.

ERR! builder:custom deploy-to-abap SAPUI5 application ZTRAVELAPP00001 was not uploaded or registered successfully

ERR! builder:custom deploy-to-abap SAPUI5 application ZTRAVELAPP00001 was not uploaded or registered successfully

ERR! builder:custom deploy-to-abap ***** Upload of SAPUI5 App or Library from ZIP-Archive into SAPUI5 ABAP Repository *****

ERR! builder:custom deploy-to-abap 

ERR! builder:custom deploy-to-abap Running in regular mode, brief log

ERR! builder:custom deploy-to-abap 

ERR! builder:custom deploy-to-abap 22 Files found in Archive.

ERR! builder:custom deploy-to-abap 

ERR! builder:custom deploy-to-abap * Parameters *

ERR! builder:custom deploy-to-abap 

ERR! builder:custom deploy-to-abap The text files are identified using the standard settings.

ERR! builder:custom deploy-to-abap The binary files are identified using the standard settings.

ERR! builder:custom deploy-to-abap The files and folders to be ignored are determined from the built-in standard settings.

ERR! builder:custom deploy-to-abap The name of the SAPUI5 repository "ZTRAVELAPP00001" has been determined from the corresponding import parameter.

ERR! builder:custom deploy-to-abap The description of the SAPUI5 repository has been determined from the corresponding import parameter.

ERR! builder:custom deploy-to-abap The package of the SAPUI5 Application "$TMP" has been determined from the corresponding import parameter.

ERR! builder:custom deploy-to-abap Transport Request "TRLK901073" has been determined from the corresponding import parameter.

ERR! builder:custom deploy-to-abap The external Code Page Name "UTF8" has been determined from the corresponding import parameter.

ERR! builder:custom deploy-to-abap The acceptance of Unix style end of line markers in text files has been determined from the corresponding import parameter.

ERR! builder:custom deploy-to-abap Unix style end of line markers in text files get accepted.

ERR! builder:custom deploy-to-abap The delta mode has been turned on.

ERR! builder:custom deploy-to-abap 

ERR! builder:custom deploy-to-abap * Creating new SAPUI5 ABAP repository ZTRAVELAPP00001 *

ERR! builder:custom deploy-to-abap You are not authorized to create

ERR! builder:custom deploy-to-abap Upload canceled: SAPUI5 ABAP repository has not been created (successfully).

ERR! builder:custom deploy-to-abap 

ERR! builder:custom deploy-to-abap SAPUI5 application ZTRAVELAPP00001 was not uploaded or registered successfully

ERR! builder:custom deploy-to-abap 

ERR! builder:custom deploy-to-abap * Done *

ERR! builder:custom deploy-to-abap SAP_Transaction: For backend administrators: use ADT feed reader "SAP Gateway Error Log" or run transaction /IWFND/ERROR_LOG on SAP Gateway hub system and search for entries with the timestamp above for more details

ERR! builder:custom deploy-to-abap SAP_Note: See SAP Note 1797736 for error analysis (https://service.sap.com/sap/support/notes/1797736)

Following is the code form my package.json file of the project:

{

    "name": "ztravel_app_00001",

    "version": "0.0.1",

    "private": true,

    "sapux": true,

    "sapuxLayer": "CUSTOMER_BASE",

    "description": "A Fiori application.",

    "keywords": [

        "ui5",

        "openui5",

        "sapui5"

    ],

    "main": "webapp/index.html",

    "scripts": {

        "start": "fiori run --open 'test/flpSandbox.html#ztravelapp00001-tile'",

        "start-local": "fiori run --config ./ui5-local.yaml --open 'test/flpSandboxMockServer.html#ztravelapp00001-tile'",

        "start-noflp": "fiori run --open 'index.html'",

        "build": "ui5 build -a --clean-dest --include-task=generateManifestBundle generateCachebusterInfo",

        "deploy": "npm run build && fiori deploy --config ui5-deploy.yaml",

        "deploy-config": "fiori add deploy-config",

        "start-mock": "fiori run --open 'test/flpSandboxMockServer.html#ztravelapp00001-tile'",

        "undeploy": "fiori undeploy --config ui5-deploy.yaml"

    },

    "devDependencies": {

        "@sap/ux-specification": "latest",

        "@sap/ux-ui5-tooling": "^1.3.5",

        "@ui5/cli": "^2.11.1",

        "@ui5/fs": "^2.0.6",

        "@ui5/logger": "^2.0.1",

        "rimraf": "3.0.2"

    },

    "ui5": {

        "dependencies": [

            "@sap/ux-ui5-tooling"

        ]

    }

}

 

Would it be possible to guide me where I am going wrong or am I missing any prerequisites.

[gorbenkoteh]

Hello, Ariffudin,

"SAPUI5 ABAP Repository with name ZXX does not exist"

Specify a transport request in ui5-deploy config.

N.B.You can find/create desired TR in transaction SE10.

Example of config

[former_member739799]

Hi,

 

I have same issue on specific application (it's the first time i have on fiori tools). I have to undeploy then redeploy to avoid this. I don't know why it append on this app in particulary.

Br,

[TiagoAlmeida]

Great blog post.

Thanks for sharing!

[glauco]

similar error here.
i18n Folder view has children and can't be deleted

[jlong]

503 on premise is always related to an internal configuration issue where the ABAP backend is hosted;

https://ga.support.sap.com/dtp/viewer/index.html#/tree/3046/actions/45995:48363:53594:48366:52526