How to create HTML5 Module SAP Cloud Foundry

In this tutorial we will explain how to create and run the HTML5 module within a MTA project in SAP Cloud Foundry environment.  

• Open Web IDE for trial account and right click on the workspace root folder.
• Choose "New" and click on "Project from Template"

• Pop up with Template Selection screen appears, select Multi Target Application project and choose Next.

• Enter the Project Name and choose Next.

• Enter the description and select the check box for "Use HTML5 Application Repository", press next and click finish. It will create the MTA project with a name "HTML5_tutorial".

• Right click on the MTA project and choose "New" and then select "HTML5 Module".

• Template selection pop will appear, select SAP UI5 Application and click on Next button.

• Enter SAP UI5 Application name in the Module Name field and enter demo.ui in the Namespace field and click next.

• Select XML from the View Type dropdown and enter the View Name as "First View" and press next and finish.

• It will create the UI5 application with the name "HTML5App" in HTML5 module. In the View folder open the FirstView.view.xml file and create the text element in the content as per below screenshot and save the changes.

• We have created our first sample Hello World UI5 application. To test the application right click on the created UI5 application "HTML5App" and choose "Run" and then "Run as Web Application". A pop will appear to choose the file to run, select the index.html file and press OK

• It will open up the new browser tab displaying "Hello World" text.

10 Seconds to create and deploy sample Node.js application SAP Cloud Foundry

In this tutorial we will learn how to create and deploy the sample Node.js application on SAP Cloud Foundry. Follow the below mentioned steps to create your first Node.js module in 10 seconds.

Create the MTA project, refer below mentioned blog for details.

SAP Cloud Foundry MTA project

• Now we will create the Node.js module. Right click on the MTA project folder and choose "New" and select  "Node.js Module".

• Enter the Module Name and press Next.

• It will specify the version as "1.0.0" and Main JS file as "server.js". Enter the description and press Next and finish.

We can see that Node Module folder is created within the MTA project. Open the project.json file and provide the express dependency with version as "^4.0.0". We will be using express framework in node application that provides a robust set of features for web and mobile applications.

"dependencies": {

  "express": "^4.0.0"

  }, 

Within the Node Module folder we have server.js file which is the starting point of the application. In this file we will do the configuration so that application will start listening to the server ports and give the response back to the client requests.

"use strict";

const express = require('express');

const app = express();

var port = process.env.PORT || 3000;

app.get('/', function (req, res) {

 res.send("Hello World\n");

});

app.listen(port);

console.log("Server listening on port %d", port); 

We have successfully created our first Node.js application. Now to run the application, right click on the Node Module folder, choose "Run" and click on the "Run as Node.js application". It will build task for npm install and run the application.

Nodejs build task "npm install" started

Service provisioning started

Service provisioning finished

Nodejs build task "npm install" finished successfully

Application is starting

Application is running

> Node_Tutorial@1.0.0 start /home/vcap/app

> node server.js

Server listening on port 3000

It will also generate the URL so that we can test the application in the browser or use it as REST API in any application.

 

We might face error while running the Node.js module in case the cloud foundry setting are not configured for the account endpoints. 

Request failed: error URI: /di/runner/run?project=/first_mta_project/Node_Tutorial

Unable to run module.

Running module /first_mta_project/Node_Tutorial failed. See console logs for more details. Request failed: error URI: /di/runner/run?project=/first_mta_project/Node_Tutorial

Follow below mentioned steps resolve the error.

• Click on the settings icon in the left hand side panel and select "Cloud Foundry" from Workspace Preferences.
• Go to trial account home page in cockpit to check the API endpoints and the select the corresponding API from the dropdown.
• It will ask for Email Id and Password and on successful authentication, it will populate the Organization and and Space.
• Click Save and re run the Node.js application.

How to create first MTA project SAP Cloud Foundry

In this tutorial we will explain how to create your first MTA project in SAP Cloud Foundry environment.

Open the SAP Web IDE for SAP HANA: 

• Access the SAP Cloud Platform Cockpit at https:// account.hanatrial.ondemand.com/cockpit.
• Enter your SAP Cloud Platform e-mail and password. 
• Launch SAP Web IDE from the subscriptions.
• You can also bookmark or save the Web IDE link for future reference.

Once web IDE is launched, Right-click on the workspace folder and choose New then click on Project from Template. 

• It will Pop up the Template Selection screen, select environment as Cloud Foundry.

• Select the Multi-Target Application Project from template selection and press "Next" button.

• Enter the Project Name and press "Next" button.

• It will by default mention the Application Version as 0.0.1, enter the MTA project description and click on the check box to "Use HTML5 Application Repository". 
• This is required because the SAP Fiori launchpad solution stores static resources in the HTML5 repository. Press Next and then click on finish to create the MTA project.

• In the MTA project folder open the "mta.yaml" file and check the content. It will open up the mta.yaml in MTA editor which can help you to see the content in the UI layout interface. We can also click on the Code Editor to review the content in the form of code editor.

How to create and set up SAP Cloud Foundry trial account

 In this tutorial we will learn how to create and set up SAP Cloud Foundry trial account.

• In the browser window open the URL SAP cloud platform and click on "Start Free Trial"

• A pop will appear with Cloud Foundry details scroll to the bottom and choose "Register For Free"

• Follow the given instructions and create the new trial account, once your account is created you will be able to access the SAP Cloud Platform Cockpit at HANA account cockpit

• To Create a trial account, choose the trial account home page and Enter your trial account.

• Set up process for trial account will continue and Region, Global Account, Subaccount, Org, Space will be assigned.

Happy Learning. Thank You for reading, please share and subscribe :) 

Set Up SAP Web IDE for SAP HANA and Node.js artifacts

In this tutorial we will learn how to set up SAP Web IDE for SAP HANA and Node.js artifacts. Follow below mentioned steps to configure the SAP Web IDE -

• Click on settings icon in the left hand side menu panel in Web IDE.
• Go to workspace preferences and choose Extensions. 

• Search for Tools for SAP HANA Database Development, turn the switch to On.

• Search for Tools for Node.js Development, turn the switch to On.

• Search for SAP HANA Database Explorer, turn the switch to On.

• Choose Save to configure the changes. It will automatically refreshes the SAP Web IDE window to changes to reflect.

Happy Learning. Thank You for reading, please share and subscribe :)