Skip to Content
Technical Articles
Author's profile photo Marius Obert

#CloudFoundryFun #9 – Develop with the SAP Business Application Studio

In this ninth post in my CloudFoundryFun series, we will write a very simple OpenUI5 web-app and deploy it to Cloud Foundry. For this, we will use the brand new SAP Business Application Studio beta.

4th November 2019: Update screenshots and include hint from Ido Perez

The content of this post has been created for the beta release of the SAP Business Application Studio. Many things have changed since then. Please have a look at the official tutorial if you want to see how the current best practices look.

 

Exploring the new SAP Business Application Studio

If someone was to ask me about my favorite announcement at TechEd, I’d say it was the SAP Business Application Studio. The news of this “new Web IDE” wasn’t a big keynote announcement. It has rather been disclosed secretly in several CAP-related hands-on sessions during the event in Las Vegas. This disclosure immediately made waves on Twitter where developers started to discuss whether they like the idea of a new web-based IDE or not.

Since then, some time went by and more TechEd attendees had the chance to explore this IDE more in detail during TechEd Barcelona. These sessions and demos focus most on CAP-development. And a couple of days ago, the product management released a trending blog post to showcase the Business Application Studio to everyone. Some lucky developers, who work for SAP’s customers, even have the chance to test the beta version of this service already today.

In this post, I demonstrate how the SAP Business Application Studio can be used for development. In particular, I will implement an OpenUI5 application for the Cloud Foundry environment. While most demos are centered around CAP, I want to take this chance to demonstrate the openness of the SAP Business Application Studio and use it for something different.

Beta, Beta, Beta!

Before we start, I want to highlight that this service is still in beta mode. As we all know, this means not everything works perfectly. Depending on the use-case we might also be required to do some manual plumbing. It also means that almost everything could be subject-to-change. Having said that, I think that it is great that we released the service early on, to collect as much feedback as possible during the pre-release phase.

Let’s get started…

Besides its openness, the main value of this IDE is that it comes with everything that you need for SAP-related development. This means you don’t have to set up anything. The SAP Business Application Studio introduces the concepts of Dev Spaces, which are turn-key solutions for developers. SAPUI5-Developers, for example, might want to leverage tools such as the UI5 tooling CLI whereas Backend-Developers want to leverage the CDS CLI. Both personas can use a personalized Dev Space that comforts their individual needs. This makes the IDE leaner and more agile!

As of today, beta users can choose between two persona-oriented Dev Space kinds:

  • SAP Fiori
    • Fiori development tools, focusing on the Fiori freestyle for Cloud Foundry, where the developers get UI5 templates, UI5 LSP for javascript, tools for local Fiori test-runs and build & deploy tools
  • SAP Cloud Business Application
    • CAP development tools such as the CDS CLI, MTA tools, CF CLI plugins, and the CDS VSIX plugin

Hands-on

In this demo, we will create a simple OpenUI5 application, which retrieves data from the public Northwind oData service. This task is a nice finger exercise to get to know the new development environment.

In case you are new to OpenUI5, or web-development for Cloud Foundry in general and want to learn more about this, I recommend these getting-started tutorials.

Prepare the Setup

The first section covers the set-up of the development environment. We will create a destination in SAP BTP from which our OpenUI5 application will request data. For this, we will leverage the well-known Northwind OData service.

  1. Create a destination in the SAP BTP Cockpit.
  2. Subscribe to the SAP Business Application Studio and open it.
  3. Create a new dev space of a kind “SAP Cloud Business Application”.
  4. Open this newly created dev space.
  5. You might already be very familiar with this step if you are a fan of VS Code: Open the command palette with
    cmd + shift + P​
    
    #For Windows
    ctrl + shift + p

    and select the entry “Open New Terminal (In Active Workspace)”.

  6. Currently, the SAP Business Application Studio doesn’t come with a wizard to create UI5 projects. But this is not a problem as the SAP Business Application Studio is open and leverages open-source software. One example of this is the Yeoman scaffolding tool, which can be extended with custom generators. It’s a lucky coincident that I’ve written such a generator for OpenUI5 a couple of months ago. You can install this generator like any other npm package with
    npm install generator-easy-ui5
  7. Click on the bottom-left corner to log into your Cloud Foundry account. You’ll be prompted for the usually cf-login questions, such as the URL of the endpoint, your credentials, and the Cloud Foundry Org.

Create and Run an OpenUI5 Web-App

In this section, we will create a plain OpenUI5 web-app and hook it to a freshly created destination service instance. This will allow our web application to consume data from the Northwind endpoint without having to worry about Cross-Origin Resource Sharing (CORS).

  1. Leverage the Yeoman command to see all available generator.
    yo

    Here you can find the easy-ui5 generator we just installed.

    Select this generator and answer all prompted questions as displayed in the screenshot.

  2. Open a new workspace from the folder we just generated.
  3. Open the project descriptor file (cloud.native.app/mta.yaml) and have a look at the defined resources. You should see that our application will consume a service instance with the name “dest_app”. Let’s go ahead and create this service instance. Open the command palette again with
    cmd + shift + P​
    
    #For Windows
    ctrl + shift + p

    and select “Create a new service instance”. Now, use the values that have been defined in the mta.yaml file (name “dest_app”, service “destination”, plan “lite”). You should now see a success message in a popup.

  4. Open a new terminal via the command palette.
  5. Just to be sure, let’s use the Cloud Foundry CLI to check whether the service has been created successfully. Enter the following command in the terminal:
    cf services | grep dest_app​

    Isn’t that amazing? Not only are we automatically signed into the Cloud Foundry CLI (no cf login needed anymore), we are also able to use tools such as grep within a web-based IDE.

  6. Next, we will bind the service instance to the app router. For this, open the command palette once again and select “Bind a service to a locally run MTA module”. Go with the default values for the path to the mta file and module. Select the service instance we just created and confirm with the check mark The env file will by fault be created in a new folder named “dist”. This file will contain the service key of the binding. Now, move this the env file to the folder “approuter”.
  7. Now, that the service binding has been established, add a new route to our destination in the app router config file (approuter/xs-app.json).
    {
     	"source": "^/Northwind/(.*)$",
    	"target": "$1",
    	"authenticationType": "none",
    	"destination": "Northwind",
            "csrfProtection": false
    },

    Did you notice that the auto-save feature is activated by default? No need to save your changes manually anymore!

  8. The app router is the application that will host the OpenUI5 web app. Install all its  dependencies and start the server process with:
    cd approuter/
    npm install
    npm run local
  9. The SAP Business Application Studio will notice that a server process has been started and offer you to open and browse the application. Click this button see your application running.

Develop and Test the Web-App

In this section, we will add a list that displays all products from the Northwind OData service.

  1. Right-click on the view definition file (webapp/view/MainView.view.xml) to open the file with the code editor. Add the following snippet within the <content> tag in line 8.
    <List items="{/Products}">
      <StandardListItem type="Active" press="handleListItemPress" title="{ProductName}"/>
    </List>
  2. Replace the content of the controller (webapp/controller/MainView.controller.js) with the following snippet:
    sap.ui.define([
      "sap/ui/core/mvc/Controller",
      "sap/m/MessageBox"
    ], function(Controller, MessageBox) {
      "use strict";
    
      return Controller.extend("cloud.native.app.controller.MainView", {
    		onInit: function () { },
    
    		// show in a pop-up which list element was pressed
    		handleListItemPress: function (oEvent) {
    			MessageBox.show("You pressed item: " + oEvent.getSource().getBindingContext(), {
    				icon: sap.m.MessageBox.Icon.INFORMATION,
    				title: "It works!",
    				actions: [sap.m.MessageBox.Action.OK]
    			});
    		}
    	});
    });
    
  3. Let’s make our web application aware of the Northwind OData service. To do this, we need to declare the data source and create a model that accesses the data source. Both aspects require changes in the manifest (webapp/manifest.json).
    "dataSources": {
    	"Northwind.svc": {
    		"uri": "/Northwind/V2/Northwind/Northwind.svc/",
    		"type": "OData"
    	}
    }

    "": {
    	"type": "sap.ui.model.odata.v2.ODataModel",
    	"dataSource": "Northwind.svc",
    	"preload": true
    },

  4. In this section, we only touched “UI files” of the web-app, which means there’s no need to restart the server process (if it’s still running). Just refresh the web app to see the changes immediately. Cool, right? (don’t forget to make sure to do a hard refresh of the page to clear the cache)PS: You can open the popup by clicking on a list item.

Deploy

So far, the application is running within the SAP Business Application Studio – and therefore tied to its lifecycle. To make our application independent of the cloud-based IDE, we will have to deploy it to Cloud Foundry.

  1. Go to the project root and invoke the npm script to package and deploy the application.
    cd ..
    npm run deploy
  2. In the output, you can see that the application has been deployed successfully, along with the URL to access it.
  3. Unfortunately, this URL is not a link. The problem here lies within the Cloud Foundry tool that deploys the application. This tool prints the URL without the protocol-prefix. Luckily, the terminal of the SAP Business Application Studio comes with all the tools we need to print a link 🙂
    echo "https://"$(cf apps | grep started | awk '{print $6}')

    Now you are able to click on the URL to open the OpenUI5 application in a new tab.

Live Coding

Would you like to see and hear me while I go through this demo flow? No problem! I’ve been invited by DJ Adams to introduce the SAP Business Application Studio in his live streaming show. This stream will most likely happen next week (4th Nov – 8th Nov). After the session, you will be able to find the recording of this episode here.

Here’s the recording 

Summary

In this edition you have learned:

  • That the SAP Business Application Studio build on open source software
  • How to invoke the Yeoman scaffolding tool
  • How to install new community generators for Yeoman
  • How OpenUI5 apps can be built from scratch
  • That the SAP Business Application Studio can be used to create Cloud Foundry service instances
  • How to bind Cloud Foundry service instances to your applications
  • Hot to deploy applications from the SAP Business Application Studio
  • That many great things are to come in this project

#CloudFoundryFun #10 – Partial Deployments to Cloud Foundry

About this series

This was the ninth blog post of my monthly new series #CloudFoundryFunThe name already says all there is to it, this series won’t necessarily be about building enterprise apps on Cloud Foundry. I think there are already plenty of great posts about those aspects out there. This series rather thinks outside the box and demonstrates unconventional or novel Cloud Foundry use-cases ?.

Assigned Tags

      83 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Volker Buzek
      Volker Buzek

      nice nice nice - what a step into the right direction for us devs!

      now please also help making our "dev voice" audible in product mgmt for app studio in regards to:

      - release the Theia-vscode-compatible plugins so we can reuse them in our own offline dev env

      - make app studio available as part of the generic sapcp-cf-license

      these are two major points for fostering adoption of the tool!

      Author's profile photo Nir M Kol
      Nir M Kol

      Hi Volker,

      We are looking at the option of releasing a “Personal Edition” for offline use.

      and… we are also looking at the option of releasing the Theia-vscode-compatible plugins for reuse via the marketplace. 

      Nir

      Author's profile photo Dave Beardall
      Dave Beardall

      Hi Nir

      Any update on a Personal Edition?

      Thanks

      Dave

      Author's profile photo Ido Perez
      Ido Perez

      Hi Marius,

       

      Nice demo.

      I would recommend to first run the yeoman generator, and then open the workspace on the created folder (instead of opening the projects folder). So your settings files, launch.json and tasks.json will be part of your project, and be saved to git.

       

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Great tip, thanks Ido!

      I just updated the content

      Author's profile photo Pierre Dominique
      Pierre Dominique

      Hi Marius,

      Thanks for sharing this! Do you know if there's a way to deploy CAP apps to CF today? The examples used at TechEd were all using -in--memory IIRC.

      Thanks,

      Pierre

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Hi Pierre,

      yes indeed 🙂 You can have a look at our Codejam Repository to see this in action. In this Codejam we write a bookshop application that eventually will be deployed to CF (in exercise 10).

      Author's profile photo Nils Lutz
      Nils Lutz

      Hi Marius,

      maybe i’m missing something, but i can not start the approuter due to error “Format validation failed (Route references unknown destination “Northwind”)" when i issue command “npm run local”. I followed all of your steps and also have the “Northwind” destination from the linked tutorial.

      What am i doing wrong? I double checked for typos or missing commas and stuff like that, but no luck :/

      Thanks,

      Nils

       

      Edit: Even if i add the destination definition directly into the created dest_app service instance in my cf space instead at subaccount level the command fails with same error message like above.

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Hi Nils,

       

      this is indeep very strange ?. There could be several error sources, please try the following to eliminate some of them.

      1. Please remove the Northwind router from the xs-app file. Are you able to start the approuter now?
      2. Double-check that the cf service has been bound correctly to the correct folder (approuter). There should be a .env file in this folder.
      3. Check in the SCP cockpit whether the dest_app service instance and its service key is still alive. You can also use the command line "cf service" and "cf service-keys dest_app" to do this.

      I'm sure we'll be able to make it run ?

      Author's profile photo Nils Lutz
      Nils Lutz

      Kudos to you 🙂

      The cf service was not bound correctly, after i fixed that the approuter worked as expected!

      Another thing i found, it is important to put the "Northwind" route at first position in the "routes" array in xs-app.json file instead of just appending it otherwise the service request responses with a 404.

      Luckily Witalij Rudnicki posted his file in full below your comment 🙂

      Now all steps are working. Thank you!

      Author's profile photo James Zhang
      James Zhang

      i'm facing the same error. Below is the result when i run cf service & cf service-keys command. Do you see any problem there?

       

      Author's profile photo Witalij Rudnicki
      Witalij Rudnicki

      I just passed that step with no such a problem. This is how my xs-app.json looks like.

      {
      	"welcomeFile": "/index.html",
      	"authenticationMethod": "none",
      	"routes": [
      		{
      			"source": "^/Northwind/(.*)$",
      			"target": "$1",
      			"authenticationType": "none",
      			"destination": "Northwind",
      			"csrfProtection": false
      		},
      		{
      			"source": "^/(.*)$",
      			"target": "$1",
      			"authenticationType": "none",
      			"localDir": "webapp"
      		}
      	]
      }
      Author's profile photo SIMMACO FERRIERO
      SIMMACO FERRIERO

      Hi Marius,

      can you confirm that SAP Business Application Studio is not yet available on the Trial Landscape, even after enabling BETA features? I couldn't find it there.

      Simmaco

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Hi Simmaco,

      yes, I can confirm this. The good news is, that the App Studio will come to trial (but I cannot tell when exactly this will be the case).

      Author's profile photo Maximiliano Sacchetta
      Maximiliano Sacchetta

      Hi Marius.

      I'm not able to Subscribe to the SAP Business Application Studio, mi account is trial, is it possible that the SAP Business Application Studio is not available for trial accounts?

      Regards

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Hi Maximiliano,

      yes, I can confirm this. The good news is, that the App Studio will come to trial (but I cannot tell when exactly this will be the case).

      Author's profile photo Maximiliano Sacchetta
      Maximiliano Sacchetta

      Thank you Marius

      Author's profile photo Pavlo Astashonok
      Pavlo Astashonok

      Subscribe to the SAP Business Application Studio and open it.

      I don't see SAP Business Application Studio among my marketplace subscriptions. It is not available on trial Cloud Foundry accounts?

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Hi Pavel,

      good question! You can't find the Business Application Studio in the marketplace because it is not a CF service. It is an SCP service - the subtle difference here is, is that the service is offered on subaccount-level and not on a space-level.

      You should be able to find the Studio in "Subscriptions" on your subaccount level:

       

      Regards,

      Marius

      Author's profile photo Pavlo Astashonok
      Pavlo Astashonok

      Thanks. Anyway I'm right

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      I missed the "trial" word in your question.

      The Application Studio for trial is planned for next year.

      Author's profile photo Patrick Wenger
      Patrick Wenger

      Hi

      For some reason when I try to create a new destination service instance there is no such service "destination" in the dropdown. Instead there is a service called "connectivity". If I choose this one, I can choose the service plan "lite". However, the service isn't created (check with cf services | grep dest_app​ is negative). I tryed to create the service instance with the cli (cf create-service connectivity lite dest_app). If I use "destination" as the service there is the same error like befor (no such service). The output of the cli command is as follows:

      Creating service instance dest_app in org NOVO Business Consultants AG_novobeta / space novobetaspace as patrick.wenger@novo-bc.ch... cf create-service destination l SERVICE_INSTANC en service name is ambiguous Service broker error: Space f138751c-adb8-419c-a216-10831660c880 in Org 31d4b866-61c4-4e59-86f8-d8b29a46d260 has no sufficient quota. Instance creation not allowed. Either check the global account license for respective Entitlement or assign a quota plan for Space f138751c-adb8-419c-a216-10831660c880.

      But the space id and the organisation id stated in the error message don't exist.

      Am I missing something? Or has something changed in the beta version?

      Best regards,

      Patrick

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Hi Patrick,

      I'd assume this is caused by either one of the following options:

      • The "destination" service is not activated in your subaccount account. Please configure the entitlements of your subaccount and add the service plan "destination"

      • The service plans already exist in your subaccount, but the CF CLI currently points to a different organization/subaccount. In this case, please use the following commands to point the CLI to the correct target
        cf orgs #will print all available subaccounts
        cf target -o <new org>​
      Author's profile photo Patrick Wenger
      Patrick Wenger

      Hi Marius

      Thanks for your reply. I did check the entitlements but if I try to configure the entitlements there isn’t any entry for “destination” in the list of available entitlements for the respective subaccount (see printscreen).

      This may explain why I don’t see any destination service in the business application studio. However, what do I have to do to be able to add the necessairy entitlement to my subaccount?

      Thanks again for your support.

      Patrick

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Hi Patrick,

       

      this is the root cause of the problem. I know how I would fix it as an SAP employee, but I'm afraid you won't have that option ?. Can you check if you have access to the SAP Cloud Platform Connectivity service?

       

      Author's profile photo Patrick Wenger
      Patrick Wenger

      according to the overview with the CLI-tool we have access to the connectivity service but not to the destination service (see printscreen).

      In fact I was able to create a destination to the Northwind Database as you described. Is this destination part of the connectivity service or the destination service?

      However, I am not able to create a service binding for the destination service with the CLI. Neither for the destination service (service offering destination not found) nor for the connectivity service (space has no sufficient quota)

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Hi Patrick,

      you should be able to see (and create instances of) both services, connectivity and destination, here.

      Can you try to reach out to your admin or the owner of the global account to make sure that you have access to the destination entitlement? This is the crucial piece that is missing.

      Author's profile photo Satvindar Chug
      Satvindar Chug

      Hi,

      Application is running fine within the SAP Business Application Studio but while deploying to Cloud Foundry using "npm run deploy" command, I am getting below error:

      > satUi5app@0.0.1 deploy /home/user/projects/cloud.native.satUi5app
      > npm run build:mta && cross-var cf deploy mta_archives/satUi5app_$npm_package_version.mtar

      > satUi5app@0.0.1 build:mta /home/user/projects/cloud.native.satUi5app
      > npm run build:ui && shx cp -r approuter/. dist/ && mbt build -p=cf

      > satUi5app@0.0.1 build:ui /home/user/projects/cloud.native.satUi5app
      > rimraf dist && ui5 build --dest dist/webapp

      info builder:builder Building project satUi5app not including dependencies...
      info builder:builder ? (1/1) Building project satUi5app
      info builder:builder application satUi5app ? (1/8) Running task escapeNonAsciiCharacters...
      info builder:builder application satUi5app ? (2/8) Running task replaceCopyright...
      info builder:builder application satUi5app ? (3/8) Running task replaceVersion...
      info builder:builder application satUi5app ? (4/8) Running task generateFlexChangesBundle...
      info builder:builder application satUi5app ? (5/8) Running task generateComponentPreload...
      info builder:builder application satUi5app ? (6/8) Running task createDebugFiles...
      info builder:builder application satUi5app ? (7/8) Running task uglify...
      info builder:builder application satUi5app ? (8/8) Running task generateVersionInfo...
      info builder:builder Build succeeded in 1.02 s
      info builder:builder Executing cleanup tasks...
      [2019-12-02 10:12:23] INFO generating the "Makefile_20191202101223.mta" file...
      [2019-12-02 10:12:23] INFO done
      [2019-12-02 10:12:23] INFO executing the "make -f Makefile_20191202101223.mta p=cf mtar= strict=true mode=" command...
      make: /home/user/projects/cloud.native.satUi5app/node_modules/mbt/unpacked_bin/mbt: Command not found
      /bin/sh: /home/user/projects/cloud.native.satUi5app/node_modules/mbt/unpacked_bin/mbt: not found
      make: *** [Makefile_20191202101223.mta:30: pre_validate] Error 127
      Error: could not build the MTA project: could not execute the "make -f Makefile_20191202101223.mta p=cf mtar= strict=true mode=" command: exit status 2
      npm ERR! code ELIFECYCLE
      npm ERR! errno 1
      npm ERR! satUi5app@0.0.1 build:mta: `npm run build:ui && shx cp -r approuter/. dist/ && mbt build -p=cf`
      npm ERR! Exit status 1
      npm ERR!
      npm ERR! Failed at the satUi5app@0.0.1 build:mta script.
      npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

      npm ERR! A complete log of this run can be found in:
      npm ERR! /home/user/.npm/_logs/2019-12-02T10_12_24_049Z-debug.log
      npm ERR! code ELIFECYCLE
      npm ERR! errno 1
      npm ERR! satUi5app@0.0.1 deploy: `npm run build:mta && cross-var cf deploy mta_archives/satUi5app_$npm_package_version.mtar`
      npm ERR! Exit status 1
      npm ERR!
      npm ERR! Failed at the satUi5app@0.0.1 deploy script.
      npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

      npm ERR! A complete log of this run can be found in:
      npm ERR! /home/user/.npm/_logs/2019-12-02T10_12_24_064Z-debug.log

       

      Can you guide me to fix this issue?

      Thanks!!

      BR,

      Satvindar

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Hi Satvindar,

       

      I’ve seen the same error last week. I’m not yet sure what causes this behavior, but you can work around it by replacing the “build:mta” script in the “package.json” file with:

      "build:mta": "npm run build:ui && shx cp -r approuter/. dist/ && npx mbt build -p=cf",

      (I added the “npx” part)

       

       

      Author's profile photo Prateek Vinod Chadha
      Prateek Vinod Chadha

      Hi Marius,

       

      I have seen a lot of your blog posts. Just wondering if you already have a blog explaining how to "integrate S4 ui5 appliation on SCP portal ?"

      something like this : https://wiki.wdf.sap.corp/wiki/display/uxintegra/Example+1%3A+Integration+of+a+Fiori+UI5+app+from+an+on-prem+S4+system

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Hi Prateek,

      good question!

      I have not yet written such a post. I agree this is also an interesting topic but atm #CloudFoundryFun always includes a "coding-part" and is less about admin tasks.

      But who knows, maybe the series will have this focus area at one day 🙂

      Author's profile photo John Astill
      John Astill

      Marius Obert I see that nano is installed in the terminal, any idea if vi will be available in the future?

      bash: vi: command not found

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Mhhh, I actually don't know. Maybe Nir M Kol can help out here.

      Author's profile photo John Astill
      John Astill

      Hi Marius/Nir,

      Thanks for the quick response.

      To give it some context. I was trying to get my keys from .ssh so I could setup the trust with a github repo. I ended up using nano.

      I end up doing the same in VS Code, even though there is an editor embedded, if I am in the terminal and need to make a quick change to a system file outside the project I use vi in the command line.

      Regards

      John

      Author's profile photo John Astill
      John Astill

      vim is installed in the terminal. Vi IMproved, so my question is covered.

       

      Regards

      John

      Author's profile photo Julian Breuksch
      Julian Breuksch

      Hi Marius,

      Thank you for the guide. I tried the Application Studio also now by myself and it looks promising.

      Unfortunately, I still have some problems when I want to preview my application. I have a simple fiori application (created it with the built in templates; no data connection).

      I understood that I need to provide instances for the uaa and also the app-runtime (html5 repository), and then link them to my .env file.

      However, every time when I want to preview the application, I receive "503 Service Temporarily Unavailable". It seems like the html5 runtime does not find the application => makes sense because I did not "link" a host, but I am also not sure if this is even required.

      And if yes, where it should be linked. I tried to put an .env file into the deployer module, where it points to an app-host instance, but its still not working.

      Do you have any hints or ideas here?

      Thanks!
      Julian

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Hi Julian,

      I do assume you followed this tutorial, right?

      Here you only need to bind the xsuaa (and if needed the destination) service instance. When using the run configuration, you don't need to bind an HTML5 app repo service (neither host nor runtime) as the configuration will host the web app for you.

      I hope this helps,

      Marius

      Author's profile photo Andre Ferreirinha
      Andre Ferreirinha

      Hi Marius,

       

      I'm facing this same issue. I already bound the xsuaa service to my application but by only using the Url generated by the app router I get the 503 error.

      When adding to the URL the <project_name>/index.html the application works fine.

      What am I missing here?

       

      Regards,

      André

      Author's profile photo AMIT GUPTA
      AMIT GUPTA

      Hello Marius,

      I am working on Tutorial -

      Develop an SAP Fiori App Using SAP Business Application Studio - https://developers.sap.com/tutorials/appstudio-fioriapps-create.html#4601bba2-edcc-49f4-8984-4ce195be2896

      I am getting below error while adding OData service in the project ( step 4 ) :

      'Consume SAP Services failed. Reason: Error: Failed to get metadata. Reason: Not Authorized'

       

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Hi Amit,

      yes, this is a known issue (there should be a popup asking you for the credentials). You can work around it by using another OData collection or by adding authentication to the destination directly. I would recommend the latter.

       

      The tutorial itself should be updated soon as well.

      Author's profile photo AMIT GUPTA
      AMIT GUPTA

      Thanks Marius for your quick guidance I am able to proceed after putting the credentials in ES5 destination but unfortunately I got stuck again at below error when I ran module to run the application (Step 8 ) :

      UAA tenant mode is shared, but environment variable TENANT_HOST_PATTERN is not set

      Error message seems strange as I checked uaa tenant-mode is set as 'dedicated' in xs-security.json file.

      I am using 'application' plan for UAA service instance.

      Please advice where am I going wrong ?

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Hi,

      I have to admit, I'm not familiar with this problem. However, there is another known issue in the tutorial with the XSUAA. First, you need to modify the xs-security.json file and add the following top-level-property to the JSON file:

        "oauth2-configuration": {
            "redirect-uris": [
                "https://*.eu10.trial.applicationstudio.cloud.sap/**"
            ]
        }

      You might need to adapt the redirect URI according to your region.

      Then, create a new xsuaa service instance (you can remove the old one) with this new config:

      cf create-service xsuaa application myUaaServiceInstance -c xs-security.json

      Now you can bind the new service instance and try to run the application again.

      Author's profile photo AMIT GUPTA
      AMIT GUPTA

      Thanks Marius , Now I am able to bind UAA instance to service but I am getting error while running the configuration :

      The redirect_uri has an invalid domain

      I am using same configuration in xs-security.json file for redirect UIs as mentioned above:

       "oauth2-configuration": {
            "redirect-uris": [
                "https://*.eu10.trial.applicationstudio.cloud.sap/**"
            ]
        }

      My region is also eu10

      I have checked standard SAPhelp for identifying the root cause but could not get resolution.

      https://help.sap.com/viewer/9d1db9835307451daa8c930fbd9ab264/Cloud/en-US/2f8aa08fa9b949a7b31be7318c47b86b.html

      Author's profile photo Raz Korn
      Raz Korn

      Hi AMIT GUPTA ,

      Can you share more details – screenshot of the error, full xs-security.json content (on SCP, not AppStudio), is the name of the UAA service identical to the name defined in the json?

      BTW – Marius Obert showed how to generate an instance using CLI. You can also do it through the SCP cockpit in the specific space you’ll be using.

      ...and...you can do the tutorial without UAA, i.e. when generating the app choose no for UAA. then you'll also not have the need to do the UAA service bind step, etc. The updated tutorial does not include UAA.

      Regards – Raz

      Author's profile photo AMIT GUPTA
      AMIT GUPTA

      Hello Raz ,

      Thanks for updating the tutorial. I have checked it . You have removed UAA part from it . Since I would like to learn more about authentication in CF hence try to get UAA service working in Business Studio otherwise it would be straight forward without UAA.

      I am attaching screenshot of the error which I am getting  while accessing URL:

      https://p2000437412trial-01-workspaces-ws-72l9j-app1.eu10.trial.applicationstudio.cloud.sap/

      Content of XSUAA instance service key:

      Content of xs-security.json from App studio:

      Author's profile photo Raz Korn
      Raz Korn

      Hello AMIT GUPTA ,

      The changes Marius Obert mentioned should be done in the xs-security.json of the SCP UAA service instance. You can create this instance using CLI as Marius mentioned or use the SCP Cockpit. Please remove the "oath2-configuration" section from the project's json in AppStudio. There is no need to make modifications to the json on AppStudio.

      {
        "xsappname": "trial-uaa-service",
        "tenant-mode": "dedicated",
        "scopes": [
          {
            "name": "uaa.user",
            "description": "UAA"
          }
        ],
        "role-templates": [
          {
            "name": "Token_Exchange",
            "description": "UAA",
            "scope-references": [
              "uaa.user"
            ]
          }
        ],
        "oauth2-configuration": {
            "redirect-uris": [
                "https://*.eu10.trial.applicationstudio.cloud.sap/**"
            ]
        }
      }

       

      If this does not work, perhaps a clean start (new project) will work and then compare to the current project...

      Regards - Raz

      Author's profile photo Christian Hanusch
      Christian Hanusch

      Hello Marius, you are using openui. Is it possible to add a sapui5 module to the app?

       

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Hi Christian,

      yes, SAPUI5 is also supported by the easy-ui5 generator and by the ui5 tooling.

      Author's profile photo Christian Hanusch
      Christian Hanusch

      Thanks for the quick reply!

      I was wondering because I am developing a CAP App sticking to the class about that topic ( https://open.sap.com/courses/cp7 ), which is currently active at opensap.

      Is it possible to integrate a ui5 module to an already existing app (let the app use sqlite, hana db or the already implemented inmemory feature)?

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Yes, this is definitely possible. The only bad news about this is, that there is no "wizard" that does this integration for you. But this isn't hard so it can easily be done in steps:

      1. Create a new folder for the new UI module in the project root, e.g. "app" (which contains the approuter and a nested "webapp" folder
      2. Add the approuter module to the MTA.yaml file

      I would say this is the most basic setup. You could go a step further and use the HTML5 app repo to store multiple webapps. I would say this makes sense for advanced usage.

      The approach above is definitely the one I would recommend to starters.

      Author's profile photo Robin Reeb
      Robin Reeb

      Hi there, probably not the best place to ask this, but I’ll try anyway.

       

      First of all the tool is amazing and integrates really well into my existing workflows!

       

      However, there is an issue I couldn’t overcome so far.

      When I want to clone a git repo from SAPs internal Github, it gives me
      .
      fatal: unable to access ‘https://github.wdf.sap.corp/<my repo url>/’: Received HTTP code 502 from proxy after CONNECT

      I would assume connecting to git repos should be supported out of the box, since all the tools are in place, or am I missing something?

      Thanks!
      Robin

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Hi Robin,

      which instance of the App Studio are you using? I just tried to clone a repo from the central canary landscape and this worked.
      I can confirm that it is not working out-of-the-box for trial and other public landscapes which is on purpose as there is no separation between SAP and non-SAP employees there ?.

      It is possible to connect the Appstudio with on-prem systems via the SAP Cloud Connector and SCP destinations.

      Let’s move the rest of the domain-specific discussion to Slack

      Author's profile photo Mike Zhang
      Mike Zhang

      Hi Marius,

      Could we use Application Studio to develop node.js module which access tables in hdi containers but not using CDS? We want to write custom node.js code to interact with HANA tables and stored procedures.

      Best wishes,

      Mike

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Hi Mike,

       

      sure, that can be done too. But you need to be aware that not-using-cap means that you need to write more code and manage more config by yourself. In general, the App Studio can do anything you could do on a local machine.

      Author's profile photo Jorge Sousa Villafaina
      Jorge Sousa Villafaina

      Very useful blog for me! I have and additional doubt.. If I want to use external openUI5 libraries like openui5-fhir how can I register it? If I register the dependencies when I run the app the app try to find the library in the openUI5 url resource path and not found it..

      I hope you can give me a clarification about this!

      Thanks a lot for your blog!

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Hi,

      let's continue the discussion here to avoid confusion.

      Author's profile photo Jorge Sousa Villafaina
      Jorge Sousa Villafaina

      Hello,

      Sorry, you are right, it's better not merge... Regarding your blog I have a question.. I have my app with one destination service instance binded and added to xs-app.json. I wan to check it running the UI5 app but I have some problems... When I run from approuter folder:

      npm run local

      I get an error:

      request to /samplecloudmyApp/ 
      completed with status 404 - Cannot GET /samplecloudmyApp/#

      I think that is related with my xs-app.json and routes configuration:

      {
        "welcomeFile": "samplecloudmyApp/",
        "authenticationMethod": "none",
        "logout": {
          "logoutEndpoint": "/do/logout"
        },
        "routes": [
          {
            "source": "^/mySyst/(.*)$",
            "target": "$1",
            "authenticationType": "none",
            "destination": "mySyst",
                  "csrfProtection": false
          }
        ]
      }

      The error indicates that welcomfile is not found. I have tried to apply this:

      {
        "welcomeFile": "index.html",
        "authenticationMethod": "none",
        "logout": {
          "logoutEndpoint": "/do/logout"
        },
        "routes": [
          {
            "source": "^/mySyst/(.*)$",
            "target": "$1",
            "authenticationType": "none",
            "destination": "mySyst",
                  "csrfProtection": false
          },
      	{
      		"source": "^(/.*)$",
      		"target": "$1",
      		"authenticationType": "none",
      		"localDir": "../uimodule/webapp"
      	}
        ]
      }

      It seems that index.html is now found but resources path is incorrect.. Is not a valid configuration..

      Could you please help me with this?

      Many thanks!

       

       

       

       

      Author's profile photo VM Kumar
      VM Kumar

      Hi Marius,

      Thanks a lot for blog, I tried to follow same steps as in blog ( also seeing the youtube video f yours) for BAS, but I could not find the any link in local in package.json, even if add manually – the error is ‘cannot find the module dotenv'( Not able to run the application manually). Also for me in current version no dist folder got create and nor the bind service command is ‘Bind a service to a locally run application’ is it same as your blog? Could you please help on how to resolve this

       

      The%20error%20message%20and%20folder%20structureThe error message and folder structure

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Hi,

      you are right, the descriptions that I explained here don’t work anymore. I added a note on top of the post, that the content is outdated as the Business Application Studio has a better, built-in way to create web apps now. Please have a look at the official tutorial if you want to see how the current best practices look.

      In case you really want to do it the way that is described here, you need to install a version of easy-ui5 that is older than 1.0.0

      I hope this helps

      Author's profile photo VM Kumar
      VM Kumar

      Even that blog is different from the version which we have now, there is no option of selecting the services and templates as shown in that.

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      We always try to keep our tutorial updated which, unfortunately, isn't always possible for products that are still under development (such as the App Studio).

      Please use the "Provide Feedback" link in the tutorials to let us know when you find an outdated tutorial.

      Author's profile photo Daniel Emmenegger
      Daniel Emmenegger

      Hello Marius Obert

      Thanks for this blog. When I try to deploy my app on my onPrem-System, I always get: Failed to deploy Application: <Request failed with status code 403>

      What could be wrong with my configuration or project?

      I've configured everything according to https://help.sap.com/viewer/584e0bcbfd4a4aff91c815cefa0bce2d/Cloud/en-US/340cf0109ec6451c88f7a0129990de59.html

      Regards,

      Daniel

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Hi Daniel,

      I'm afraid I'm not familiar with the deployment flow to on-prem systems.

      Sorry

      Author's profile photo Peter Widmer
      Peter Widmer

      I am facing the same error when trying to deploy. Any news on this problem?

      Thanks, Peter

      Author's profile photo Martin Voros
      Martin Voros

      Hi,

      I am hitting the same error. I enabled trace on ABAP stack and I can see that it tries to execute SSL handshake. The problem is that the system is exposed via plain HTTP. I also found the folloing note in documentation for abap-deploy.

      Note: When requested to provide Target System url make sure you are using https and not http.

      So I assume it’s this. The problem is that CC does not like HTTPS connection on that system so I cannot verify it.

      Are you connecting via HTTP or HTTPS?

      Cheers

       

      See my follow up below as I did not manage to reply to a correct thread 😉

      Author's profile photo Martin Voros
      Martin Voros

      I managed to fix the issue with CC and TLS but it did not help. But I found out that you can run abap-deploy with option --ll trace and it generates a nice log file. The problem in my case is that it's trying to connect to oData service /UI5/ABAP_REPOSITORY_SRV. It does not exist on my system. I can see this service on another system that has higher release. I found a comment that it should be available from SAP_UI 753. That seems to match my systems as the one that does not have this service is on 752. The other one is on 753.

      Cheers

      Author's profile photo Peter Widmer
      Peter Widmer

      Hi Martin,

      a big thank you for reaching out. The trace helped me a lot! I needed to activate the same OData service you mentioned plus adding a virus strategy in SPRO.

      Now, the deployment seems to start (as there is a full BSP project in the backend, I gotta check whether it works). In the very end, I still face the error ‘Failed to deploy Application: <Parse Error>’ without any log information. I hope, the BSP app works even though.

      Thanks! Peter

       

      P.S. If your NW release is too low for the respective OData service I advise you to switch to Neo (WebIDE). The deployment process is super convenient without the need for this OData service.

      Author's profile photo Martin Voros
      Martin Voros

      yesterday I spent 1/2 day migrating our apps from WebIDE to Studio so we have consistent experience between local development and cloud development (e.g. using prettier for formatting or newer version of UI5 tooling). It all works now except the deployment as that was the last step that got me to this blog. We will keep using this npm package https://www.npmjs.com/package/nwabap-ui5uploader until we can later switch to abap-deploy. No need to go back to WebIDE ?

      My guess would be that it may be trying to re-calculate app index and that fails. Or something similar. If you are adventurous and have some spare time, you can install abap-deploy on your own laptop and debug it from there.

      Cheers

      Author's profile photo Peter Widmer
      Peter Widmer

      Oh okay, I could try the ui5uploader package, too. Since I am facing another certificate issue when running abap-deploy in VSCode (but that is another issue…).
      Best of luck!

      Peter

      Author's profile photo Peter Widmer
      Peter Widmer

      I also tried to use your suggested package, but facing the same error as when I tried the abap-deploy package:

      Error: unable to get local issuer certificate

      Did you set any environmental variables or something like that?

      Thanks!

      Peter

      Author's profile photo Martin Voros
      Martin Voros

      Hi,

      no, that package works for me without any issues. I've been using it for long time. ABAP AS has self signed cert but it does not cause any issues. But just to be clear, I've not tried to deploy from Studio. I've deployed only directly from my laptop. There is one or two more community packages that use WebIDE interface for deployment. I don't think that those will help as your problem seem to be related to connection and all other packages should be using same interface. Good luck.

       

       

      Author's profile photo Ruben Rollano Carcajona
      Ruben Rollano Carcajona

      Hello Peter,

       

      You can skip the check of sefl signed certificate in your ui5.yaml file with

      ignoreCertError: true

       

      Author's profile photo Peter Widmer
      Peter Widmer

      Hi Ruben,

       

      thanks for this hint, but unfortunately the error persists 🙁

       

      Best, Peter

      Author's profile photo Ruben Rollano Carcajona
      Ruben Rollano Carcajona

      Perhaps it is due to he way your are executing the app. Could you describe how are you staring the app and with errod do you receive?

      Best regards.

      Author's profile photo Peter Widmer
      Peter Widmer

      Yes sure!

      I deploy the app using abap-deploy (with the HTTPS connection of my Cloud Connector).

      I also tried the old deploy npm package nwabap-ui5uploader.

      The only error I receive (even the trace log does not provide further information) -after entering all deployment information like client, destination, sourcefolder, username, password- is:

      Failed to deploy Application: <unable to get local issuer certificate>

      Author's profile photo Jan Vranek
      Jan Vranek

      Hi Peter,

      I have the same problem with <Parse Error> which you had before. Have you found any solution?

      A deployment works fine. It seems that all files are uploaded but the error is always there.

      After the first upload, next update (in the same project) is without any error or warning.

      Thanks

      Author's profile photo Peter Widmer
      Peter Widmer

      Hi Jan,

       

      unfortunately, I did not find any solution yet. I'm sorry!

       

      Best regards and good luck,

      Peter

      Author's profile photo Raz Korn
      Raz Korn

      Hi Jan Vranek ,

      I recommend that you open a ticket.

      If not - This deserves its own question in SAP Community Q&A.

      Can you share which SAP_UI component is available in your backend?

      Depending on the wizard used to create the app, one of the following deployment flows should be used: Deploy to the SAPUI5 ABAP Repository (deprecated), Deployment (SAP Fiori tools).

      More information is available here.

      Regards - Raz

      Author's profile photo Gordon Huang
      Gordon Huang

      Hi Marius, thanks for the blog. 

      I understand the content may be a little bit outdated, I am sure you are an expert on this topic, and I hope I can get some help from you on this. 

      Our project has multiple modules including a commonly shared library module.  All modules except the common one are runnable in Cloud Foundry Fiori launchpad.  Those modules have their own xs-app.json and package.json files.  Our project has been implemented in production.  All development was done in WebIDE and we would like to migrate it to BAS.  The whole project source code is moved to BAS and can be built and deployed to production successfully using the mta.yaml file.  However, we are unable to get local run to work - failed to consume SAP Hana on-premise system ODATA services and other external restful services.  Any suggestions to make this work shall be appreciated very much.  Or you can write another extended article on this?

      Thanks

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      Hi Gordon,

      I'm glad you like the post. I'm afraid it's hard to give a remote analysis of this problem as there could be many causes for this.  It might be related that you need to leverage create the run configuration manually to be able to bind destinations and service instances. The best suggestion I could give is that you try to create a minimal project on which you are able to reproduce the issue. With such a minimal project, it might be easier to find the root cause.

      If you come along specific issues during this process, please ask the questions under answers.sap.com as there is a broader audience there that could help you.

      Thanks,

      Marius

      Author's profile photo Cameron Hunt
      Cameron Hunt

      Hello Marius, in relation to "there’s no need to restart the server process (if it’s still running) ... to see the changes immediately. Cool, right?": the auto-refresh of BAS is currently one of my biggest pain points...

      Is it possible to at least turn of the auto-reload of the WebApp at least until I hit the Save button ?

      Cameron

      Author's profile photo Marius Obert
      Marius Obert
      Blog Post Author

      I guess you run into the problem because you have the "auto save" feature activated as well. If so, have a look at the SAP Business Application Studio settings where you can turn this off :).

      Author's profile photo Ashwani Goyal
      Ashwani Goyal

      HI Cameron,

      Goto your UI5.yaml and either change the path below to some empty folder or make the delay very very large.

       name: fiori-tools-appreload
            afterMiddleware: compression
            configuration:
              port: 35729
              path: webapp
              delay: 30000000000
      More information is available here: https://www.npmjs.com/package/ui5-middleware-livereload
      best regards,
      Ash