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>.appgyverapp.com 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.

 

Prerequisite

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>.appgyverapp.com 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 app-256067_web_standalone_build-174043.zip -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", "sap.app": {"id": "myapp","applicationVersion": {"version": "1.0.0"}},"sap.cloud": {"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
modules:
  - name: myapp_app_router
    type: approuter.nodejs
    path: .
    parameters:
      disk-quota: 256M
      memory: 256M
    requires:
      - name: html5_repo_runtime
resources:
  - name: html5_repo_runtime
    type: org.cloudfoundry.managed-service
    parameters:
      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

      5 Comments
      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.

      https://docs.appgyver.com/publishing/distributing-your-app#web-distribution

      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