Skip to Content
Technical Articles
Author's profile photo Lalit Mohan Sharma

Deploy your AppGyver App to the HTML5 Applications Repository using CLI Plugin

In my previous article, we tried to comprehend the potential of constructing no-code applications utilising no-code UI development tools and pre-built no-code APIs.

The next step is to make the application available to the users by distributing it.

The application is deployed to AppGyver’s cloud and made available under the <your-app-name> subdomain, as indicated in the web build settings, when we develop a web version of the application with the Build Service.

we can also download the web app build as a zip file. Simply link a default route to index.html to host the app on our own server, and make sure the server is setup to serve all of the other assets, and we’re good to go.

In this blog post, I’ll export the web application and deploy it in the SAP Business Technology Platform’s HTML5 Applications Repository.



We need to have:

  1. A valid SAP Cloud platform account if not please follow Get a Free Account on SAP BTP Trial
  2. The Cloud Foundry command-line tools installed if not please follow Install the Cloud Foundry Command Line Interface (CLI)
  3. Install CF HTML5 Applications Repository CLI Plugin
  4. Download the latest version of NodeJS.(I personally use node v14.0.0)
  5. Editor of your choice (I use VS-code)
  6. It would be ideal if we had already created the no-code app using my prior article as a guide.


Let’s proceed step by step


Step 1: Export the web application

Goto to the AppGyver’s application and click on Launch button


To open the distribution panel, click on DISTRIBUTE.


Click OPEN BUILD SERVICE to access the build service.

There are three build options available on the build service: iOS Mobile, Android Mobile, and Web App. We’ll solely utilise the Web App build for this tutorial. For the Web App, click the configure button. For the AppGyver hosted domain, choose a hostname.

Once the project is completed, this will be used to deploy the app to AppGyver’s cloud and make it available on the <your-app-name> subdomain. Click the build button after configuring the programme to configure version parts of the build and create the project.

We will be able to download the build results once it has finished building (which may take some time).


Step 2: Deploy the web application

The CF HTML5 Applications Repository CLI Plugin is a Cloud Foundry CLI plugin that tries to make command line access to APIs exposed by the HTML5 Application Repository service as simple as possible.

Without a deployer application, we can now push HTML5 applications to the HTML5 Applications Repository.

With just one command, We may install the CF HTML5 Applications Repository CLI Plugin.

% cf install-plugin -r CF-Community "html5-plugin"

Now first, unzip the file using the command below.

% unzip -d myapp


An HTML5 application deployed to HTML5 Application Repository must have two main files at root level: manifest.json and xs-app.json.

change directory to myapp and add manifest.json and xs-app.json using the command below:

% cd myapp
% echo '{"_version": "1.12.0", "": {"id": "myapp","applicationVersion": {"version": "1.0.0"}},"": {"public": true,"service": "cloud.service"}}' > manifest.json
% echo '{"welcomeFile": "/index.html","authenticationMethod": "none","routes": [{"source": "^(.*)","target": "$1","service": "html5-apps-repo-rt"}]}' > xs-app.json

Run the command below after logging into your BTP Account to deploy your AppGyver application to the Html5 Application Repository.

cf html-push

and then use the following command to check your application.

cf html5-list


Step 3: Run the web application

Create a new dedicated directory for the Node.js application called “myapp-router”

% mkdir myapp-router
% cd myapp-router



To start the application setup, change to the “myapp-router” directory and execute “npm init -y” in the command line. This will walk you through creating a package.json file.

% cd myapp-router
% npm init -y

Now that we have initialized the project. Let’s install the app-route package using the following command:

% npm install @sap/approuter

Update script tag in package.json

"scripts": {
  "build": "mbt build",
  "start": "node node_modules/@sap/approuter/approuter.js"


The xs-app.json file is required to specify the routes for the app router. Create the xs-app.json file and copy the following code to this file and save it.

    "welcomeFile": "/myapp/index.html",
    "authenticationMethod": "none",
    "routes": [
        "source": "^(.*)$",
        "target": "/myapp/$1",
        "service": "html5-apps-repo-rt",
        "authenticationType": "none"



You must include the deployment descriptor file (mta.yml) to deploy an application into Cloud Foundry. This file contains details about the applications to be deployed.So next file we need to create is mta.yml and copy the following resource requirements and save it.

ID: myapp_html5
_schema-version: "2.1"
version: 1.0.0
  - name: myapp_app_router
    type: approuter.nodejs
    path: .
      disk-quota: 256M
      memory: 256M
      - name: html5_repo_runtime
  - name: html5_repo_runtime
    type: org.cloudfoundry.managed-service
      service-plan: app-runtime
      service: html5-apps-repo


Be in the same directory where you have created mta.yml file. Build and deploy the application using the following command:

% npm run build
% cf deploy mta_archives/myapp_html5_1.0.0.mtar


Use the route created after a CF deploy to test the application.


Thank You !!


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Marius Obert
      Marius Obert

      Wonderful post Lalit!

      PS: I think you can drop the "myapp" path prefix in the xs-app.json as it will be added to the route in the target-path.

      Author's profile photo Lalit Mohan Sharma
      Lalit Mohan Sharma
      Blog Post Author

      Hello Marius,

      You've taught me a lot, and thanks for your comment.

      Correct, it will be added to the target-path route, add will always reach the "myapp" repository.  Because the deployed HTML5 application is autogenerated and is not well organised, i devised this workaround to ensure that it served all of the other assets(CSS and JS files).

      Author's profile photo Murali Shanmugham
      Murali Shanmugham

      Thanks for documenting and sharing the steps. I wish the AppGyver team provide a click & deploy approach to BTP rather than this manual approach.

      Author's profile photo Lalit Mohan Sharma
      Lalit Mohan Sharma
      Blog Post Author

      Thanks for your comments, Murali

      It would be fantastic if the AppGyver team could provide a "click and deploy" approach to BTP. The approach we've taken in this article is typical AppGyver procedure.

      Author's profile photo Tony Chiu
      Tony Chiu

      Thanks for sharing the steps Lalit.
      But I still facing some issue when attaching AppGyver WebApp into BTP launchpad, could you share some more detail on how the AppGyver WebApp can work on BTP launchpad ? thanks

      Author's profile photo Lalit Mohan Sharma
      Lalit Mohan Sharma
      Blog Post Author

      Tony, thank you for your comment.

      It's great to hear that you're getting this AppGyver WebApp to run on the BTP Launchpad. I've never tried this before, will try and let you know.

      Author's profile photo Lucas Andrade Melchiori
      Lucas Andrade Melchiori

      Had any progress on that?

      I am attempting to integrate the AppGyver WebApp on the BTP Launchpad, but had no success so far.

      Author's profile photo Lalit Mohan Sharma
      Lalit Mohan Sharma
      Blog Post Author

      Hello Lucas,

      There is a discovery centre mission available now to Use SAP AppGyver to build Side-by-Side UI. Extensions for SAP S/4HANA. please check once maybe it will help you



      Author's profile photo YASWANTH NAKKINA

      Hi Lalit,

      In my AppGyver tool under distribute your App section 'Web App build' is disabled. Is there any specific reason for this issue ?

      Best Regards,

      Yaswanth Nakkina

      Author's profile photo Lalit Mohan Sharma
      Lalit Mohan Sharma
      Blog Post Author

      Hello Yaswanth,

      Thanks for your comments.

      I'm not sure why it's been disabled for you. According to my understanding, everytime I make changes in the app composer, the configure tab takes some time (perhaps hours) to become active.

      Please check the following bug in their tracker:

      The only solution they offer is to reload the page with cache override.

      Author's profile photo Viktor Rudometkin
      Viktor Rudometkin

      Thanks for a good blog post, Lalit. It helped me a lot. I'd like to share the challenges I faced when following it:

      1. When running "cf deploy" I encountered the error "'deploy' is not a registered command. See 'cf help -a'". The reason for that error was the missing CF plugin "multiapps". It can be installed from the CF plugin repo via "cf install-plugin multiapps -f". Make sure you have the plugin repo added "cf add-plugin-repo CF-Community" before installing the plugin.
      2. I was also facing several similar errors like "Controller operation failed: 422 Unprocessable Entity: CF-UnprocessableEntity(10008): memory space_instance_memory_limit_exceeded" when running "cf deploy". As the error suggests, there were some issue with the memory limit settings of my CF space and the memory requirements set in mta.yaml file. You might need to adjust either of the settings to make them aligned.
      3. Another small issue I faced was the extensions of the file "mta.yml". I changed it to "mta.yaml" to make it work. Otherwise, an error was produced by CF CLI.



      Author's profile photo Lalit Mohan Sharma
      Lalit Mohan Sharma
      Blog Post Author

      Hello Viktor,

      Thanks, for your wonderful comments.

      yes you are right, to deploy your application, you must first install the missing CF plugin "multiapps." for memory space_instance_memory_limit_exceeded you need to a just adjust it or if you able to increase it that would be great. for mta file extensions will update in my blog post as well.

      Best Regards,


      Author's profile photo Giacomo Tanduo
      Giacomo Tanduo

      Hi Lalit,

      I have a problem in the last passage, when running

      npm run build there is the error:

      INFO executing the "make -f Makefile_20230301125250.mta p=cf mtar= strict=true mode="command... Error: could not build the MTA project: could not execute the "make -f Makefile_20230301125250.mta p=cf mtar= strict=true mode=" command: exec: "make": executable file not found in %PATH%