Technical Articles
HTML5 Applications Managed by SAP Cloud Platform – The new way of developing HTML5 apps
[Update 2021]: Note that this asset was created before our branding changes related to SAP technology were announced on January 2021. Note that SAP Cloud Platform Launchpad was renamed to SAP Launchpad service, and SAP Cloud Platform Portal was renamed to SAP Cloud Portal service
[Update 2022]: Please note that this blog was published prior to the re-branding related to SAP Build portfolio, which was announced at SAP TechEd 2022. SAP Launchpad service and SAP Work Zone come together under the SAP Build Work Zone brand, with two editions: standard edition (formerly SAP Launchpad service) and advanced edition (formerly SAP Work Zone). You can learn more in this announcement blog post: SAP Build Capabilities Explained | SAP TechEd | SAP News Center
There were plenty of changes in SAP Cloud Platform since last month. Some of the services were renamed or superseded with new services. You will most of the updates in the “SAP Cloud Platform Service Description Guide”. Some of these have direct impact on the decisions which need to be made when developing HTML5 applications which are accessed via a Fiori Launchpad on SAP Cloud Platform. This has been one of the most common discussions I have been having in the last few weeks. In this blog, I hope to clear some of the confusions and outline the available options when developing HTML5 apps.
Application Runtime:
When developing HTML5 applications in SAP Cloud Platform (Cloud Foundry environment), you always needed a subscription to “SAP Cloud Platform Application Runtime”. This not only allows you to deploy HTML5 apps, but also apps based on nodejs, Java, Python etc.
Few weeks back, there was an announcement of a new service called “SAP Cloud Platform Extension Factory, Application Runtime” which supersedes this service. That is a long name for a service.
So what’s the difference. Some of the key aspects have been documented in this blog post “Redesigned SAP Cloud Platform Extension Factory, application runtime“. It was mainly around the simplification of this service across all hyperscalers. What you would notice, is that the new service includes some of the underlying capabilities without any quota restrictions (as shown below).
When you build and deploy your HTML5 apps, these apps are usually accessed via an application router. These apps get deployed within the space of a subaccount. In the “Applications” menu, you will be able to see the application routers which will help consume the contents which are deployed into the HTML5 application repository.
As per the documentation – “An application router serves static content from HTML5 application repository, authenticate users, rewrite URLs, and forward or proxy requests to other micro services while propagating user information. “
When you navigate to the “Service Instances” you will be able to see the HTML5 Application Repository along with the connectivity & destinations which are used by the application.
This is an approach which we have been following to build HTML5 applications for a while.
HTML5 Applications Managed by SAP Cloud Platform
Recently, SAP introduced a new option to build HTML5 apps. With this new option, you no longer have to deploy your apps with your own application router. Its all managed by SAP as a service.
As per the documentation, here are the benefits of using this approach.
- Simplify and speed up your development and deployment experience
- Save resources by running a serverless HTML5 application, which doesn’t require any application runtime
- Lower maintenance efforts by leveraging the most up-to-date routing capabilities
- Meet the changing demand for HTML5 applications by automatically adjusting the service to maintain consistent and predictable performance
SAP recommends using the standalone Application Router only in advanced cases, for example when application router extensibility is required.
Note that applications which are deployed using this method will no longer show up within the spaces. This will be in the “HTML5 Applications” menu at the subaccount level.
Most importantly – to use the “HTML5 Applications Managed by SAP Cloud Platform”, you need to subscribe to either SAP Cloud Platform Portal service or a new service called “SAP Cloud Platform Launchpad service”.
Going forward, as part of new engagements – if you are going to either build new HTML5 apps or leverage a Fiori Launchpad on SAP Cloud Platform – ensure you have the below services:
- SAP Cloud Platform Launchpad service
- SAP Business Applications Studio
- Bandwidth
- Custom Domains (Optional)
In the next blog post, I will walk you through the steps which are required to develop a HTML5 app managed by SAP Cloud Platform and how it can be integrated into a central Fiori Launchpad.
Thank you for the blog post. I have been telling to myself, why are that HTML5 Applications tab on subaccount level and couldn`t find any info how to make them appear there.
I thought that it has to do something with the SaaS service to exposure that app.
Thank you for this blog post.
I was wondering how I could put my HTML5 app at the subaccount level as I was seeing the section in the left panel.
Now I have my answer !
I had the same questions as most of you 🙂
HI Murali,
Thanks you for the blog and step by step process of understanding how to build the central launchpad.My question here is, I am not able to see my HTML5 application deployed as "Standalone Approuter",on could foundry in Launchpad Content Provider.As you mentioned i need to change the Approuter as "Managed by SAP Cloud Platform ", but how can i change it in my existing application.Please guide.
Thanks
Ishita
Hi Ishita,
Can you please raise this as a question in the forum. We can have an expert support your question. Thanks
Hi Murali,
This was a great blog.
We have two Fiori HTML5 applications in Launchpad up and running. Our customer wants to use Custom Domain to make it more easier to remember the Launchpad URL also in internal marketing etc.
Since Fiori Apps can be seen under subaccount in HTML5 Applications, we don't have anything under Spaces. But still Custom Domain requires applications to be available under Spaces. When trying to Map the Fiori application to Custom Domain I get error Application not Found.
So as a summary with this approach we are only able to create Custom Domain to all other types of applications except Fiori HTML5. Is this correct assumption?
So far I have not found a good example how and why would anyone need to use Custom Domain if Launchpad is in use. Nor have I found any example how to map launchpad URL to Custom Domain.
Thanks,
Br
Mikko
Hi Mikko,
Thanks. I think the best way is to configure custom domain for the Launchpad site. I am pretty sure its possible. Can you please raise this as a question in the forums.
Did you check this SAP Help documentation.
Thanks
Hi Murali,
thank you for the blog.
One question: I always thought that when we do side-by-side extensions (Apps) for S/4HANA Cloud, that these Apps will be developed in SCP and then also run there, and will be "somehow" integrated into the S/4HANA Cloud Launchpad.
Now I found this guide which describes, that you can deploy your app directly to the UI5 ABAP Repository of the S/4HANA Cloud System. The app would then not run in SCP?
https://help.sap.com/viewer/841f379acd104dbf8685b3ad26e66af3/SHIP/en-US/eb4fdebfa9e442ea96b725fa4f894ae3.html
Can you explain this? I think it would be a major change to be able to deploy to the S4HC backend system.
Thank you
Johannes
Hi Johannes,
I haven't been following the updates on the S/4HANA Cloud. As per this guide, you can deploy the app directly to the backend system.
One of the challenges which I have heard from S4HC customer is that extension apps are built in a FLP on Cloud Platform and the remaining standard apps are in S4HC FLP. May be this feature was introduced to support a unified access.
Also, for S/4HANA systems, I see there is now an option to also consume custom Fiori apps deployed on Cloud Platform within the S/4HANA FLP. https://help.sap.com/viewer/ad4b9f0b14b0458cad9bd27bf435637d/Cloud/en-US/48ff1b03f65f4661b642255881c5e890.html
Hi Murali,
Thanks for the elaborated blog. Really helpful.
We have developed and deployed an Fiori Application - Freestyle UI5 Application through BAS.
We are using Managed Approuter. The deployed application is visible in the Cloud Foundry - Space - Instances with (Destination, AppHost, Authorization app).
But this Application is not visible in Subaccount HTML5 repository or Space - Application repository and neither in Portal Service - Content Provider (saas-approuter).
We need to add this deployed app to our Portal service at subaccount level and as the application/router not available in any TML5 repository we are not able to add the app.
Can you please advise if any imp step is missed here which will integrate the application from the Instance to the HTML5 repository (Specially the subaccount HTML5 repository or Content Explorer of portal service)?
Thanks,
Smita Thorat
Hi Murali,
thank you very much for this great block.
I have a further question and maybe you could help.
We just implemented HTML5 applications in BTP Cloud Foundry as a Multitarget application and with XSUAA enabled.
We also deployed the application with the "Managed Application Router" option.
Now we want to activate Authentication and Authorization for the application but couldn't find any solution.
We found the following documentation, but it seems it's only working for usage with own application router.
https://help.sap.com/viewer/65de2977205c403bbc107264b8eccf4b/Cloud/en-US/0a69484539d64567ba17269f6e5ba88d.html
So the question is how it's possible to secure a html5 app with a managed application router ?
Best regards,
Andreas
Hi Andreas,
Thanks. Would you be able to raise this as a question in the forum please.
Thanks, Murali for the document. What do you mean by 'Bandwidth' as the required service? Is this a service on BTP?
Yes, its a service on BTP. Please check out the service description guide https://www.sap.com/about/agreements/policies/cloud-platform.html
Hi, Expert ~
Thanks for this best blog.
I have a question that I wish you could help.
Our team uses BTP but we use neo subaccount.
I faced a problem, It does not appear in the site manager when transferring new HTML5 applications.
How to resolve this problem. Pls help me ~~
refer to below our system environment.
- DEV, QA, PROD : neo subaccount
- Cloud Transport Service : Cloud Foundry
. using service : CTransport Management Service
- system configure reference Link :
https://help.sap.com/viewer/ea72206b834e4ace9cd834feed6c0e09/Cloud/en-US/905baea4d6c7404290bff6c042184b4e.html
Best regards
Hi Jae-Hoon Chung, Can you please raise this as a question in the forum. We can have an expert support your question. Thanks