Technical Articles
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 14: You could see the below screen
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.
Hi Hema,
This blog is really very good for web components.Can we use this development approach in MTA applications with CAP service?
Thank you Sai. Yes it is possible as a standalone application with destination for CAP service.
That's cool,
We should consider adding something similar as sample project in App Studio
Thank you Yuval.
Great blog!
Hi Hemalatha,
Great blog, well detailed. Is it possible to deploy React application to Fiori Launchpad?
Hi Nagesh,
Have you found a solution yet?
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