Skip to Content
Technical Articles
Author's profile photo Michał Majer

SAP Business Application Studio IDE – running example UI5 Web Components in React

In this blog post, I wanted to show You my approach to checking the capabilities of SAP Business Application Studio for building and running application with other than UI5 javascript libraries/frameworks. To keep with SAP environment I installed the demo application of using UI5 Web Components in React.

SAP Business Application Studio

Currently, BAS is only available on SAP’s Multi-Cloud environment (Cloud Foundry) for productive use. We can test it on Cloud Foundry trial account. Login to Your SAP Cloud Platform Cockpit trial account and go to SAP Business Application Studio from the Subscriptions tab.

At initial launch, You will have to configure development space for IDE.

I created space with name “Web” and chose the Basic template with minimum plugins selected.

UI5 Web Components React Sample Application

Let’s proceed with steps from the official tutorial:  https://github.com/SAP-samples/ui5-webcomponents-sample-react

At first open IDE terminal:

Then follow tutorial steps:

  1. Clone this repository and navigate into the downloaded directory.
    git clone https://github.com/SAP/ui5-webcomponents-sample-react.git
    cd ui5-webcomponents-sample-react
  2. Install all dependencies
    yarn

    or

    npm install
  3. Start a local server and run the application. (The running application can be found here: http://localhost:3000)
    npm start

 

React application should open in a new browser tab – as we can see, thanks to integrated GIT and NPM in BAS IDE we could set up this example in a simple 5 steps!

If needed, proceed with port settings:

My first impressions

In my opinion, BAS is a huge step forward comparing to SAP Web IDE.
Based on Theia IDE, BAS embraces many of the design decision of VS Code what makes it promising, a development tool for SAP products.
I would like to use it in future XSA development / UI5 development.

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Marius Obert
      Marius Obert

      Nice post, Michał! I couldn't agree more, the AppStudio implements many of the lessons learned from the Web IDE and has a huge potential for "SAP development" tasks.

      PS: When you check out the "SAP_Cloud_Platform" branch, you can deploy the app directly to Cloud Foundry.

      Author's profile photo Robin Reeb
      Robin Reeb

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

       

      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,from your post.

      Thanks!
      Robin

      Author's profile photo Raz Korn
      Raz Korn

      Connecting to corporate resources requires Cloud Connector.

      Regards – Raz