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.