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

[michal_majer]

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.