Skip to Content
Technical Articles
Author's profile photo Hemalatha Bharanikumar

Explore UI5 Web Components for React in SAP Business Application Studio(Develop & Deploy)

Dear Readers,

I hope this blog post will be helpful for you to kick start with UI5 Web Components for react in Business Application Studio.

The UI5 Web Components for React
The UI5 Web Components are the new offering of UI5 to provide a set of reusable UI elements to you which can be used for your static web sites or for web application using any web framework of your choice with a minimalistic footprint. They allow you to create a consistent user experience aligned with the SAP Fiori Design Guidelines and incorporate the Fiori 3 design.

React can be used as a base in the development of single-page or mobile applications. UI5 Web Components for React is a Fiori3 compliant React library built on top of the UI5 Web Components.It also providing complex components and layouts on top of the UI5 Web Components

Business Application Studio
SAP Business Application Studio is new IDE which offers modular development environment for various business applications. It is available in SAP Cloud Platform Cloud Foundry environment as SaaS application

Now lets see the step by step process,
Step 1: Go to the Cloud foundry trial account. Navigate to sub-account and choose subscriptions. Search for SAP Business Application Studio

 

Step 2: Navigate to SAP Business Application Studio and click on Subscribe button.

 

Step 3: Once done with the subscription, it’s the time to assign the role collection to your email id using trust configuration SAP ID Service. Add the below roles to your email ID in trust configuration.

Step 4: Now let’s go to your sub-account Subscriptions and access the SAP Business Application Studio application.

Step 5: You have successfully logged in to SAP Business Application Studio. Click on Create Dev Space Button

 

Step 6: Provide dev space name, select Basic and Click on Create Dev Space

Step 7: After successful creation of new dev space, click on the dev space name.

 

Step 8: You have entered into your development space of SAP Business Application Studio. Now open a new terminal.

 

Step 9: In the new terminal execute the below code.

npx create-react-app demo –template @ui5/webcomponents-react

 

Step 10: Go to File –> open workspace

Step 11: Choose the React project “demo” and click on “Open”

Step 12: You could see your project workspace. Now give “npm start” in terminal. Also make sure you are inside your project directory installed dependencies with “npm install”.

 

Step 13: Once compiled successfully you could see your application listening to port 3002. Click on “Expose and Open”

 

 

Step 14: You could see the below screen

    Step 15: Now its time to create your own component. Create a new file named Home.jsx file and copy the below code. Also install the dependencies,

npm install @ui5/webcomponents-react –save

import React from "react";
import { Card } from "@ui5/webcomponents-react";
import { ShellBar} from "@ui5/webcomponents-react";
import { LineChart } from "@ui5/webcomponents-react-charts";
export function Home() {
    const datasets = [{
        label: "Covid cases",
        data: [5, 34, 80, 123,345,500,789, 1234]
    },{
        label: "Death",
        data: [1, 10, 14, 21,24,25,69, 114]
    },{
        label: "Recovered",
        data: [0, 5, 35, 46,58,278,500,1000]
    }];
    const labels = [
        "Day 1",
        "Day 2",
        "Day 3",
        "Day 4",
        "Day 5",
        "Day 6",
        "Day 7",
        "Day 8"
    ];
    return (
        <div>
            <ShellBar primaryTitle={"My Cards"} />
            <Card
                heading="Covid-19"
                style={{ width: "330px", margin: "40px" }}>
                <LineChart datasets={datasets} labels={labels} />
            </Card>
        </div>
    );
}

 

Step 16: Go to App.js file and import your new component Home. Remove the existing code and  add your new component inside theme provider.

App.js

import {
  ThemeProvider
} from '@ui5/webcomponents-react';
import React from 'react';
import './App.css';
import { Home } from "./Home";
function App() {
  return (
    <ThemeProvider>
         <Home />
    </ThemeProvider>
  );
}

export default App;

 

Step 17: Again run your application by giving “npm start” in the terminal. Now your application looks like,

Step 18: To start with the deployment process,we need to add manifest.yml file in our project directory.

Copy the below piece of code in manifest.yml file.

applications:
- name: ReactApp
path: build/
buildpack: https://github.com/cloudfoundry/staticfile-buildpack
memory: 128M

 

 

Step 19: Now create a optimized production build with “npm run build” or “yarn build“. Once build is successful, you could see the generated build folder in your project directory.

 

Step 21: If you are logged in to your cloud foundry already you can skip this step. Otherwise you will receive a below prompt asking for CF end point, email Id and password. Then choose your organisation and space in preceding prompts.

 

Step 22: Once successfully logged in to your CF space, from your project directory give the command “cf push”. Now you could see your application in your CF space

 

That’s it you have successfully created your React app , added your web components for React and deployed your application to CF environment.

 

For other available components refer the below link,
https://sap.github.io/ui5-webcomponents-react

Conclusion

In this blog post, We have learnt how to enable Business Application Studio, create dev space,create React application, adding Web Components for React, run the application from BAS and to deploy the application to Cloud Foundry environment.

Suggestions are welcome
Thank you:)

#HappyLearning

Regards,
Hemalatha B.

 

 

 

Assigned Tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo sai santhosh
      sai santhosh

      Hi Hema,

      This blog is really very good for web components.Can  we use this development approach in MTA applications with CAP service?

      Author's profile photo Hemalatha Bharanikumar
      Hemalatha Bharanikumar
      Blog Post Author

      Thank you Sai. Yes it is possible as a standalone application with destination for CAP service.

      Author's profile photo Yuval Morad
      Yuval Morad

      That's cool,

      We should consider adding something similar as sample project in App Studio

      Author's profile photo Hemalatha Bharanikumar
      Hemalatha Bharanikumar
      Blog Post Author

      Thank you Yuval.

      Author's profile photo Suriya Pandiyan
      Suriya Pandiyan

      Great blog!

      Author's profile photo Nagesh Yellapu
      Nagesh Yellapu

      Hi Hemalatha,

       

      Great blog, well detailed. Is it possible to deploy React application to Fiori Launchpad?

       

      Author's profile photo Ching Yao TSENG
      Ching Yao TSENG

      Hi Nagesh,

      Have you found a solution yet?

      Author's profile photo Dimo Uzunov
      Dimo Uzunov

      Hello,

      Great tutorial !
      Quick remarks in 2022 even basic app requires 270M of RAM to start and my app was crashing in Cloud foundry. Also I've added extra parameter -m 512M after my cf push command so it's:

      cf push -m 512M

       

      Also you need to activate the "CF" tools in your basic BAS it's called MTA tools

      Regards,

      Dimo