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 !!