Skip to Content
Author's profile photo Michal Keidar

SAP Web IDE – Deployment to SAP Cloud Platform Explained

Introduction
One of SAP Web IDE’s main features is deploying applications to SAP Cloud Platform.

In this blog I will showcase this feature and how it should be used in SAP Web IDE.

 

Definitions

Software Deployment: The process of getting software to the point where it is available for active use.

Git: Widely used version control system for software development.

 

Past
In the past, due to technical difficulties, the deployment to SCP was done by creating a Git repository and pushing the application’s files into it.

This created an unnecessary dependency between the deployment and the Git source control mechanisms.

After we solved the technical difficulties, the deployment was implemented using a dedicated API without the need to use Git actions. This allowed us to make the desired separation between the deployment and the source control.

 

Present


The deployment to SCP feature is now
completely separated from the Git source control.

You have two options (depicted as radio buttons):

  • Deploy a new application
  • Update an existing application

 

When choosing to deploy a new application, the account, project name, app name, and version are displayed. You can select a different account (if you’re a member in one) or edit the app name and version.

 

 

When choosing to update an existing application, the account, project name and version are displayed and you need to select the application you want to update from the dropdown list. Based on previous deployments of this app we prefill the account and app name but it’s subject to change.

 

 

The list contains all the HTML5 applications in your account.

 

 

After deploying your application, it is ready to be used in your account!

 

 

Deployment Results

 

The deployment process creates the app in your SCP account under the HTML5 Applications section with the version you selected.

A Grunt Build is performed in the background of the deployment process.
The build artifacts are then deployed to SCP and represent the productive and more efficient version of the application. It does not reflect the project’s source files. The application is then ready for testing or productive use.

 

Wait, where did my SCP Git go?

 

When you deploy the application to SCP, the source code is no longer automatically pushed to the SCP Git. Also, it is no longer possible to connect your project to the SCP Git repository via the deployment dialog.

The application’s source code should be managed and collaborated with other developers using the great tools of Git – merging, conflict resolution, versioning and more.

 

One proposal for starting to work with SCP Git:

  1. Create a project in SAP Web IDE
  2. Create an SCP Git repository for your project from the cockpit, see Git Repositories:

    /wp-content/uploads/2016/04/new1_942700.png
  3. View the created repository details (you can also clone it to SAP Web IDE) and locate the repository URL. For more information, see Creating a Repository.
    /wp-content/uploads/2016/04/new2_942749.png
  4. Initialize your local Git repository and connect it to the remote Git repository using the URL you obtained from the cockpit.
    See more details in this helpful video: Git Basics in SAP Web IDE

     

  5. Use the Git operations to fetch, commit, and push your changes. For more information, see Using Source Control (Git).

 

 

Suggested Work Model

 

After creating the application in SAP Web IDE, you can initialize a local Git repository for it and connect it to a remote Git repository on SCP.

Now you can develop your app, collaborate with your peers, and share your code with the help of Git.

Once the development is done and the app is ready to be published, you can deploy it to SCP and make it available for others (e.g. for testing, release, etc).

You can also create a tile for it in your SAP Fiori launchpad on HCP. For more information, see Registering Applications to SAP Fiori Launchpad.

 

Important Information

 

  • If you want to deploy again an app that was previously deployed, the dialog will open with the Update an existing application radio button selected by default and the application selected in the dropdown list. You can change both options.
  • The Edit Online button in the application’s page on SCP clones the Git repository of the application into SAP Web IDE. If nothing was pushed into this repository, a folder with only a git.ignore file will be created in your workspace because the repository is empty.

 

  • If you would like to preview your app directly from HCP, make sure your application contains at least one executable HTML file (e.g. index.html), and that it is configured properly in the neo-app.json’s welcomeFile property. For more information, see Welcome File.

5.PNG

If your application does not contain an executable HTML file, the link to the application URL will not be available and the application will not run from HCP.

4.PNG

When previewing the app from FLP on HCP, an executable HTML file is not required.

Assigned Tags

      18 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Benedict Venmani Felix
      Benedict Venmani Felix

      Hello Michal,

      Nice document. I like it how the Web IDE is getting easier to use day by day, even for novice level users like me.

      I am having problems with deploying one of my apps from WebIDE to HCP and I have posted a message describing the problem, Not able to update HCP application from WebIDE

      Please take a look and see if you can help.


      Benedict

      Author's profile photo Gregor Wolf
      Gregor Wolf

      Dear Michal,

      is there already a way to automate the deployment or HTML5 apps? For the SITreg: SAP Inside Track Registration app that is using a HANA XS native backend we've created currently 3 front-end apps:


      As you see the repositories are hosted on GitHub to allow others to contribute by using their HCP Trial accounts. Currently I'm the one responsible to deploy on the SAP Mentors HCP Production account. I do that manually by using SAP Web IDE, pull the latest code from GitHub for the specific application and then deploy to HCP. You can check out i.e. the SAP Inside Track Participants. As you can imagine this process is tedious and could also be error prone.

      I've already checked the Partners Operations Guide for HCP, the HCP Lifecycle API and the Change Management with CTS+. The Operations Guide describes only manual ways from dev to QA and production. I've tried the Lifecycle API but it returned only the Java Applications that where deployed on my account. So it seems that only CTS+ might be an option. Can you provide me any direction that I should investigate further?


      Best regards

      Gregor

      Author's profile photo Michal Keidar
      Michal Keidar
      Blog Post Author

      Hi Gregor,

      Thank you for this very informative question.

      I'm not familiar with an automatic way to perform the deployment.

      Adding some colleagues who might have more details-

      Ran Hassid, Boris Tsirulnik - can you address Gregor's questions?

      Thanks,
      Michal.

      Author's profile photo Jan Penninkhof
      Jan Penninkhof

      I would expect the neo console client to take care of this, but it unfortunately doesn't support html5 applications yet. We're using neo to get Jenkinds to push new builds of the Lemonaid app to HCP though, but that app is built in Java.

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof

      If I trace the requests being made from th HCP cockpit when uploading an HTML5 application, I see the following 3 requests:

      POST https://account.hanatrial.ondemand.com/ajax/createHtml5Application/s<your_id>trial

      with payload:

      {"name":"<name_of_your_app>","status":"STOPPED","repository":""}

      POST https://account.hanatrial.ondemand.com/ajax/importHtml5Application/s<your_id>trial/<name_of_your_app>/<version_of_your_app>?X-ClientSession-Id=58974d539948ccb0f41cfee6a3a51cfc

      with multipart/form-data:

      ------WebKitFormBoundary8bJiznqFQTGXWrTt

      Content-Disposition: form-data; name="Html5FileImporter"; filename="<name_of_your_app_as_zip>.zip"

      Content-Type: application/zip

      ------WebKitFormBoundary8bJiznqFQTGXWrTt

      Content-Disposition: form-data; name="_charset_"

      UTF-8

      ------WebKitFormBoundary8bJiznqFQTGXWrTt

      Content-Disposition: form-data; name="Html5FileImporter-data"

      ------WebKitFormBoundary8bJiznqFQTGXWrTt--

      GET https://account.hanatrial.ondemand.com/ajax/getHtml5Applications/s<your_id>trial

      which returns your app-specific properties (repo, version, state, URL, etc)

      Maybe you can write your own logic based on Neo SDK to first log in, and then execute at least the first 2 requests

      Author's profile photo Sascha Scholz
      Sascha Scholz

      Hi Gegor et al.,

      there are no REST API or console tool commands for HTML5 applications yet. It's planned but I cannot make any promises or provide a timeline.

      So, currently, the only option is to reverse-engineer the Cockpit calls (beware of csrf protection). But it probably doesn't come as suprise that this is not an officially supported solution and it could break at any time.

      Sascha

      Author's profile photo Ivan Mirisola
      Ivan Mirisola

      Hi Sascha,

      Is this situation still the same for Continuous Integration of HTML5 applications? Partners are asking me how to do CI with Travis or Jenkins without the need to encapsulate the HTML5 on a Java Application (as this takes 1 compute unit per application).

      I thought that the simplest solution would be to have the files pushed/commited to Account's Git Repository created via WebIDE. Then a simple REST API would "activate" a version based on a branch corresponding to the application version or something else that needs to be executed internally (which in my opinion should already exist in place internally, since this is done by WebIDE anyway).

      I've seen the integration via an MTA archive, but doesn't this imply the use NodeJS in a Cloud Foundry instante?

      Regards,
      Ivan

      Author's profile photo Ivan Mirisola
      Ivan Mirisola

      Hi Gregor,

      I was not aware of the fact that MTAR archives cloud be used to deploy HTML5 applications on SAP-CP Neo Accounts. Thanks @sascha.scholz for pointing that out to me.

      So basically you could use the procedures described below to perform CI for HTML5 apps:

      https://www.sap.com/developer/tutorials/ci-best-practices-fiori-sapcp.html.

      The how-to illustrates how to use Jenkins and NodeJS with Grunt Cli to automate the HTML5 packaging into an MTAR file. Then use the Neo Cli (neo.sh) that comes with the SDK to push/deploy it to a Neo account.

      I haven't tested it yet, but it should work.

      Check the following link as well:

      https://blogs.sap.com/2016/12/07/developing-multitenant-applications-on-hcp-project-setup-part-3/

      Regards,
      Ivan

      Author's profile photo Shankar V
      Shankar V

       

      Hi

      I created new version for Fiori Extended PR inbox applications.  I deployed my changes through webide--> deploy to SAP Cloud platform.  My changes deployed into dev system and I am able to see my recent modifications.

      Let me know how to transport my changes to other environments (QA,PROD). Is it offline deployment (exporting the app from HCP and  importing into the target environment)

       

      Thanks

      Shankar V

       

      Author's profile photo Michal Keidar
      Michal Keidar
      Blog Post Author

      Hi Shankar,

      Either you go the full-blown way or you make it simple (if you’ve just started and have only a few projects):

      Full-blown way: Build up a CI/CD Pipeline with Jenkins, Git, Tags, Review mechanisms, etc. and use SAP Web IDE from your development account only.
You can find more explanations here: https://www.sap.com/developer/tutorials/ci-best-practices-fiori-sapcp.html (example showing how to work with UI5 Apps on SAP Cloud Platform incl. SAP Web IDE).

      The overall CI/CD Best practice guide is here (showing plenty of other possibilities to make use of CI/CD + Setup + Configuration): https://www.sap.com/developer/tutorials/ci-best-practices-intro.html

      The simple way: Make use of git features (such as branches and tags) provided by SAP Cloud Platform to manage your stages (dev, test, prod) and work with SAP Web IDE in development account only. In case of a bug you can use the git features to provide a hotfix.

      I hope this makes it clear.

      Regards,
      Michal.

      Author's profile photo Shankar V
      Shankar V

       

      Hi Michal,

      Thanks for your response.  We have SAP cloud platform and we have different subaccounts under this.  I am the only developer working in this project.   I observed GIT version numbers increased after each successful deployment. I want to understand the existing option (import/ export ) option existing under each subaccounts

       

       

       

       

      Author's profile photo Michal Keidar
      Michal Keidar
      Blog Post Author

      If your account does not have a custom Identity Provider configured (i.e. you're using the SAP Identity Provider), then you can deploy from Web IDE to your test/prod accounts.

      Else, export and import manually.

      Author's profile photo Jing Biscocho
      Jing Biscocho

      Hi Michal,

      Is SAP working on allowing deployment using custom identity providers? We have contractual developers and feel that requesting OSS IDs for them just to allow them to deploy using WebIDE is too much.

      Regards,

      Jing

      Author's profile photo Michal Keidar
      Michal Keidar
      Blog Post Author

      This should already work when deploying to the same account Web IDE is residing on. If you wish to deploy to another account and you use custom IdP, this is not supported and not planned.

      Regards,
      Michal.

      Author's profile photo Jing Biscocho
      Jing Biscocho

      Thanks a lot for the reply Michal.

      Just a quick followup question ... is this something one needs to configure/setup? See, when I try deploying an app to the same subaccount, I can only use my SAP ID

       

      Regards,

      Jing

       

       

      Author's profile photo Michal Keidar
      Michal Keidar
      Blog Post Author

      Question - is the custom IdP configured as the Application IdP? Or as the Platform IdP?

      Author's profile photo Jing Biscocho
      Jing Biscocho

      Hi Michal,

      We have it for both.

       

      Thanks,

      Jing

      Author's profile photo Michal Keidar
      Michal Keidar
      Blog Post Author

      Yeah then it will not work now. We're currently working on supporting custom IdP as the Platform IdP, but it's still a work in process.

      Regards,
      Michal.