Skip to Content
Technical Articles

#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 Cloud Platform 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

The only bummer is that you need an SAP Cloud Platform account (unfortunately this won’t work with trial accounts yet).

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 the SAP Cloud Platform 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 Cloud Platform 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 🙃.

77 Comments
You must be Logged on to comment or reply to a post.
  • 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!

  • 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.

     

  • 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

  • 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.

    • 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 🙂

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

    • 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"
      		}
      	]
      }
  • 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

    • 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).

  • 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

    • 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

      /
  • 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

    • 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>​
      • 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

        /
          • 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)

            /
          • 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.

  • 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

    • 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)

       

       

    • 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 🙂

      • 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

  • 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

    • 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

      • 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é

  • /
  • 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 ?

    • 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.

  • 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

    • 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

      • 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:

        • 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

      • 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)?

        • 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.

  • 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

    • 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

  • 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

    • 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.

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

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

         

         

         

         

  • 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

    /
    The%20error%20message%20and%20folder%20structure
    • 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

      • 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.

        • 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.

      • 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 😉

  • 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

    • 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.

      • 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

        • 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

          • 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

          • 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.

             

             

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

  • 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

    • 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