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!~
Hello Jhodel Cailan,
thanks for sharing.
While deploying a WebIDE development to an ABAP backend with report /UI5/UI5_REPOSITORY_LOAD, I experienced 2 issues:
JNN
Hi Jacques Nomssi Nzali
Thanks for the comment! However, your issue is a bit off-topic. Kindly post your issue in the Question and Answer section, from there, somebody might be able to help you with your issue. Thanks!
Hello Jhodel,
sorry, the question I have is: how long does it take for a projekt with say 70 MB to deploy? what is your experience with the UI5 tooling?
best regards,
JNN
Hi Jacques Nomssi Nzali
In that case, for 14 MB project files, it takes roughly 10 seconds (or less) to deploy using UI5 Tooling. And so far, I don't really come across of having a single UI5 app that is more than 30 MB in build files. Nevertheless, I don't think there will be any issues for your example of 70 MB size.
Hi Jhodel,
Thank you for your blog post.
To me it's good to know that I can execute Fiori apps from SICF, without configuring the launchpad.
Best regargds,
Mio
Hi Mio Yasutake
Yes - as long as you have an HTML file included in the deployed app, you can run it in standalone mode.
The one blog..I was waiting for...I had issues deploying into ABAP server n even created a discussion abt it.... let me try this...... Thanks Jhodel
Hi Vishnu Pankajakshan Panicker
I hope this blog post can help you fix your issue.
Can u have a look at below thread
https://answers.sap.com/questions/13110465/fiori-tools-vscode-connection-to-secure-abap-serve.html
Hi Vishnu Pankajakshan Panicker
Are you sure this is a deployment issue? The command npm start is to start running your app locally. And this command will refer to your ui5.yaml config. From there you can set the ignoreCertError to true.
Jhodel
Check step 5 in below tutorial
https://developers.sap.com/tutorials/fiori-tools-generate-project.html#935f7748-b548-4996-b190-02e0cb41a5b8
Vishnu Pankajakshan Panicker
Can you be more specific?
Step 5 says npm start
Hi,
Can we create a adaptation or extension project using the Fiori tools?
Hi udayagiri swamy
As far as I know, it is not available yet, but my assumption is that it will be available soon, if not Q3 then Q4 this year.
Hi, I tried with the given steps. I am getting the below error
info builder:custom deploy-to-abap Deployment failed with error Request failed with status code 403bap…
And another error after replacing the ui5-deploy.yaml with another ABAP system
info builder:custom deploy-to-abap Deployment failed with error self signed certificate deploy-to-abap..
I changed the
Please help me to resolve the issue
Thanks
Hi udayagiri swamy
Where did you put that ignoreCertError? at the ui5-deploy.yaml? So far I don't any support for that function on deploy configuration, and unfortunately, I can't replicate the same issue you have in my system.
in the ui5.yaml. I got this error (self signed certificate ) when i use https protocol.
When I use http, below error occured.
info builder:custom deploy-to-abap Deployment failed with error Request failed with status code 403bap…
I had the same error while using http:
By debugging into node_module code, I found related URL:
By searching for ABAP_REPOSITORY_SRV, it can be resolved by register service in T-code: /n/iwfnd/maint_service as blog post below:
Then the error changed, I got following 400 error:
By search Virus in SPRO, it can resolved by disable scan or activating /SCMS/KPRO_CREATE profile.
Then I still face 400 error,
with detailed but useless message:
I know ADT is mandatory dev service but not sure, then I try activating service /sap/bc/adt in T-code sicf
Then the deployment failed with 500 error at the first time, but will success in the second time.
Finally the I can deploy my app successfully using Fiori Tools by command "npm run deploy"
Thanks Sky Mu , it worked now. Initially i tried in 1709 which does not have /UI5/ABAP_REPOSITORY_SRV . I tried in 1909 and it has /UI5/ABAP_REPOSITORY_SRV.
https://sapui5.hana.ondemand.com/#/topic/a883327a82ef4cc792f3c1e7b7a48de8.html
Hi
Thanks for the blog. Managed to deploy. However subsequent deployments are not carrying through the changes to the backend. Ever faced same issue?
Thanks
Hi Timothy Muchena
I was able to do subsequent deployments. Do you get any errors?
I don't get errors in vscode. I get deployment successful message but the changes don't reflect in the backend BSP object.
Also got same issues when I tried following this blog
Unfortunately, I haven't got the chance to do this again recently, and this could be a bug. I suggest that you raise an OSS ticket or submit a question in SAP Community about this.
Hi thanks a lot for the blog.
I followed all the steps but I always get 403 when deploying. Do you know how to use https for deploying and what could be the problem?
Thanks.
Hi Adrian Braun
Thanks for the comment!
Have you read the prerequisites section of this blog post?
Excellent Blog Jhodel! Thx a lot for this!
We're doing a lot UI5 development eith Runtime ABAP (BSP) and we're planning to use Fiori Tools on VSCode in our projects.
However, when I'm trying to deploy to out ABAP BAckend (as described in your block, I' getting an Error Message:
info builder:custom deploy-to-abap Create Archive
info builder:custom deploy-to-abap i18n/i18n.properties addedLU � (4/9) Running task deploy-to-abap...
info builder:custom deploy-to-abap localService/mockserver.js added
info builder:custom deploy-to-abap test/changes_preview.js added
info builder:custom deploy-to-abap test/changes_loader.js added
info builder:custom deploy-to-abap manifest.json added
info builder:custom deploy-to-abap Component.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 localService/ZTRAVEL_U_VAN.xml added
info builder:custom deploy-to-abap annotations/annotation.xml added
info builder:custom deploy-to-abap localService/metadata.xml added
info builder:custom deploy-to-abap Starting Deployment.
ERR! builder:custom deploy-to-abap Deployment failed with error VELU � (4/9) Running task deploy-to-abap...
ERR! builder:custom deploy-to-abap unable to get local issuer certificate
info builder:builder application ZFETRAVELU � (5/9) Running task generateFlexChangesBundle...
info builder:builder application ZFETRAVELU � (6/9) Running task generateComponentPreload...
info builder:builder application ZFETRAVELU � (7/9) Running task createDebugFiles...
info builder:builder application ZFETRAVELU � (8/9) Running task uglify...
info builder:builder application ZFETRAVELU � (9/9) Running task generateVersionInfo...
info builder:builder Build succeeded in 3.71 s
info builder:builder Executing cleanup tasks...
Can this be solved with any kind of configuration in ui5-deploy.yaml? such as useStrictSSL: false or IgnoreCertError: true?
I am a little desperate and any kind of help is more than welcome 🙂
br
Thorsten
Hi Thorsten Klingbeil
Thanks for your comment!
I tried redeploying again today and it worked perfectly fine on my side. I'm guessing this has something to do with the environment setup you have that makes it impossible for me to replicate. I'm using plain basic authentication and my server hostname is on http.
I would suggest raising a support ticket to SAP about your issue.
Thanks Jhodel and this is really a very detailed blog to deploy the app to ABAP server.
Very nice tutorial, but I have probel on the .env, can help to explain for this ? I have created file .env and populated username & password, but still got error below :
ERR! builder:custom deploy-to-abap Deployment failed with error al 🔨 (11/11) Running task deploy-to-abap...
ERR! builder:custom deploy-to-abap Request failed with status code 401
ERR! builder:custom deploy-to-abap Please maintain correct credentials to avoid seeing this error
ERR! builder:custom deploy-to-abap (see help: https://www.npmjs.com/package/@sap/ux-ui5-tooling#setting-environment-variables-in-a-env-file)
Thanks
Thanks for the tutorial Jhodel. We're facing a problem with the deploy of the app. Console protocol says everythings all right and foldered get created, but nothing happens in SAP system, no files, no ICF node, just as nothing has happended. Any idea what the problem can be?