Product Information

Yuval Morad

July 5, 2021 6 minute read

React Development with SAP Business Application Studio

Overview

With SAP Business Application Studio, you can develop an HTML5 front-end React application and deploy it to the cloud environment.

In the following blog post, I will show you how to create a simple React application, based on the Material UI framework, run it locally, build and deploy it to Cloud Foundry, and then integrate it into your launchpad.

The formal documentation can be found here.

Environment Setup

In your SAP BTP account, ensure that both SAP Business Application Studio and Launchpad Service/Portal are available.

If you are using a trial account, you can skip this step.
If you are using a non-trial account, assign yourself to a developer role:

1. Navigate to Security > Trust Configuration.
2. Click the sap.default link.
3. Enter your email address.
4. Click Assign Role Collection.
5. Select “Business_Application_Studio_Developer” from the dialog box.
6. For managing a Launchpad site, assign the “Launchpad_Admin” role.
7. Click Assign Role Collection to save the changes.

Trust

Role

Open SAP Business Application Studio:

1. Click Go to Application from the SAP Business Application Studio tile.
  The SAP Business Application Studio landing page or Dev Space Manager opens.
2. Click Create Dev Space.
3. Enter a name for the dev space.
4. Make sure that these extensions are selected:
  1. MTA Tools
  2. HTML5 Runner
  3. HTML5 Application Template
6. Open the dev space by clicking on the dev space name.

Import your destination in the SAP BTP subaccount:

1. Navigate to Connectivity > Destinations in your new subaccount, click Import Destination, and choose the file with the existing destination that you want to import.
2. Make sure that the following properties are set in the Additional Properties of the destination:
  1. HTML5.DynamicDestination = true
  2. WebIDEEnabled = true
  3. WebIDEUsage = odata_gen for a general URL.
    In addition, WebIDEAdditionalData = full_url if the URL refers to an absolute service URL.
  4. If your service is an ABAP catalog, set the following property value: WebIDEUsage = odata_abap,dev_abap
    Do NOT maintain both odata_abap and odata_gen for WebIDEUsage.
  5. HTML5.Timeout = 60000
3. If the destination refers to an on-premise system, make sure that your subaccount is connected to your on-premise system using a Cloud Connector.
4. See a sample Northwind destination configuration below.

Create a React Project

To create a new React project, you can use the “yo” command from the terminal or you can open the template wizard.

Select the HTML5 Project.

Select the React Application.

Fill in the application router configuration to use the Managed Approuter.

Select Northwind_full_url as your data source for the application.

Select the entity and the properties to be displayed in your application.

Your application is created and will open in a new workspace after all of its dependencies are installed. (This may take a few seconds).

Test Your React Application

The application runs on build artifacts. Therefore, using the “watch” command ensures that every change in the source code will be built automatically.

Open the React module (one level below the root project) in the terminal and execute “npm run watch”.

Open the run configuration panel and create a run configuration.
- Press the “+” icon and choose your React module and default name.
- Click the Bind icon of your created configuration and bind the Northwind data source.

Click the Run Module icon to run the application in a separate browser. The run tool installs all dependencies that are missing for run execution and uses a dedicated run port. If you already have a running application using the dedicated port (6004), you must stop the running application first.
The React Module UI opens in a new browser.

(Optional) Change your title text and refresh the application browser to see the changes.

(Optional) Open the “manifest.json” file and add inbound navigation for future launchpad integration.

Build and Deploy your React Application

To deploy your application to Cloud Foundry, perform these steps:

Log in to the target Cloud Foundry space, where you want to deploy the application.
From the menu, click View > Find Command to open the command palette.
Enter “MBT build” in the terminal, which generates your MTA archive file, or right-click on the project’s “mta.yaml” file and click Build MTA Project.
Enter “CF deploy <mtar file name>” in the terminal, which deploys your application to the space that you logged into, or right-click on the mtar file and click Deploy MTA Archive.

From the SAP BTP cockpit, navigate to the HTML5 Applications menu and open your deployed React application.

Add your Application to a Launchpad

From your SAP BTP account, go to the Launchpad application.
See Set Up the SAP Launchpad Service.
Create a launchpad site (ensure that you have assigned yourself to the Launchpad_Admin role). See Create a Launchpad Site Using the SAP Launchpad Service.
Create an application and enter the URL of the deployed application. (You can copy the URL from the React application browser). See Add a URL App to Your Launchpad Site.

In the NAVIGATION tab, enter the Semantic Object in accordance with the intent of your “manifest.json” file in the application.

Create a Group and add your application to it.

Assign your application to a role.

Launch your application from your site.

Conclusion

You have developed a React application using SAP Business Application Studio by performing the following tasks:

Set up your environment
Create a project
Test your application locally
Build and deploy your application to Cloud Foundry
Run your standalone application in Cloud Foundry
Integrate your application to a launchpad

I will be happy to hear your feedback personally or here in the comments.

You can take your first steps using the Trial environment and take a look at all of the SAP Business Application Studio tutorials.

24 Comments

You must be Logged on to comment or reply to a post.

Bilen Cekic

July 6, 2021 at 6:07 am

Great tutorial! thank you .

I strongly believe along the way, React/Vue will take a lot of market share from SAPUI5 for SAP applications. Not only they give freedom, but also brings you tons of open source content which you can consume for your application easily. I don't even want to talk cumbersome SAPUI5 library, steps to include in build (15-20mb if you are expert enough on UI5-CLI), SAP CDN issue for on-premise system(not allowed due to license), and painful steps of upgrading entire server components just to update SAPUI5 library on your on-premise server. Yes it is just for frontend library files and just to keep your libraries up to date.
I appreciate SAPUI5, they are really doing good even it might be the fastest way of building a SAP application but after experimenting sample React/Vue applications on your on-premise system you can see the difference.

if you really want to stick to UI5 design, you can use SAP fundamentals or Web Components,
for data heavy applications my fav is Elastic UI. You can also use BlueprintJS and Fluent UI
for fancy stuff you can use Material UI, Bootstrap, Antdesign
for lightweight you can use Evergreen, Atlaskit, Semantic UI
you have tons of alternates.

SAP Conversational AI application also using React and you can see how it is different feeling comparing to BTP cockpit and other UI5 apps. I am really loving to see different frameworks in SAP world.

Daniel Endres

July 9, 2021 at 1:09 pm

Awesome news. Great to see SAP opening up more and more to other Open Source Frameworks.

Mateo Suite

July 10, 2021 at 1:36 pm

Great new feature! So much expected 🙂

I have tried to followed the instructions with the same Northwind ODATA service but getting an "Internal Server Error" when running the configuration.

Looking into the logs I am seeing the below:

Logs

Any idea what is going on?

On the other, is there any difference if instead of ODATA V2 services we want to consume ODATA V4 services?

Many thanks in advance!

Mateo.

Yuval Morad

Blog Post Author

July 10, 2021 at 1:44 pm

please check that

1. npm install took place

2. npm run build done for the module

3. in run configuration the data sorce wa bound

4. there is no already running process in debug panel

Mateo Suite

July 10, 2021 at 3:34 pm

Many thanks for your prompt response Yuval Morad

All the above steps have been performed but unfortunately, getting the same error.

Interestingly, when I deploy the app, everything runs fine so the issue is something I am missing to run it from SAP BAS.

One question, why I can not see the app once deployed in the relevant space (cf apps) and I can just see it under HTML5 applications? Should not be listed as well as a normal cf app deployed in a space?

Many thanks for your time,

Regards,

Yuval Morad

Blog Post Author

July 10, 2021 at 4:06 pm

please choose the option of managed approuter when creating the app

Mateo Suite

July 11, 2021 at 7:45 am

Thanks! Yeap, I did that but no luck yet when trying to launch on on BAS :). At least I can launch it once deployed 🙂

Yuval Morad

Blog Post Author

July 11, 2021 at 8:09 am

please share

1. launch.json

2. env file

3. picture of build folder content

Mateo Suite

July 11, 2021 at 12:05 pm

Many thanks for your assistance in advance. Very much appreciated.

env1 file:

destinations=[{"name":"Northwind","url":"https://Northwind.dest","proxyHost":"http://127.0.0.1","proxyPort":"8887"}]

launch.json file:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Run northwind-react-app-northwind-react-app-module",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/@sap/html5-repo-mock/index.js",
      "args": [
        "--standalone",
        "/northwind-react-app-module/index.html"
      ],
      "cwd": "${workspaceFolder}/northwind-react-app-module/build",
      "env": {
        "PORT": "6004",
        "run.config": "{\"handlerId\":\"html5_run_config_handler_id\",\"runnableId\":\"/home/user/projects/northwind-react-app/northwind-react-app-module\"}"
      },
      "envFile": "${workspaceFolder}/northwind-react-app-module/.env1",
      "preLaunchTask": "Run northwind-react-app"
    }
  ]
}

Build folder:

Destination:

Many thanks!

Yuval Morad

Blog Post Author

July 11, 2021 at 4:29 pm

ok I think the bug found refers to the dash in the name.

I propose :

create a new project without dashes
replace the manifest id in public and build folders, then recreate again the run congiguration
  "sap.app": {

    "id": "northwindreactmodule",

    "applicationVersion": {

      "version": "1.0.0"

    }

Mateo Suite

July 11, 2021 at 5:45 pm

Many thanks! That solved the issue running from BAS.

Thanks again for your help.

Regards,

Vishnu Pankajakshan Panicker

September 1, 2021 at 6:31 am

Yuval Morad Whats the recommendation for deplying it into Gateway Server from VSCode. I tried Ui5 Repo Load application but didnt work as expected .

Yuval Morad

Blog Post Author

September 1, 2021 at 9:05 am

Make sure to remove destination prefix in index.js

keep it e.g.

/sap/opu/odata/iwfnd/RMTSAMPLEFLIGHT

you can open terminal in the UI folder:

npm run build
abap-deploy

Vishnu Pankajakshan Panicker

September 1, 2021 at 5:04 pm

Yuval Morad

I have installed and added the required dependencies but

Yuval Morad

Blog Post Author

September 1, 2021 at 5:27 pm

Please try to use BAS trail instead of VSCODE, here I can help and meet you.

or try to follow the guide of local deoloy

https://www.npmjs.com/package/@sap/abap-deploy

Mateo Suite

September 6, 2021 at 2:59 pm

Yuval Morad

I am getting an issue when trying to launch the app from the Launchpad.

public/manifest.json includes as follows:

    "crossNavigation": {
        "inbounds": {
            "intent1": {
                "signature": {
                    "parameters": {},
                    "additionalParameters": "allowed"
                },
                "semanticObject": "intadvwizard",
                "action": "display",
                "title": "Advisory Wizard"
            }
        }
    }

The intent in the navigation configuration in Launchpad settings is as follows:

Semantic Object: intadvwizard

Action: display

I can see the tile when launching the site but when triggering it I get the error: "Not Found".

Any idea about the root cause of the problem?

Many thanks in advance.

Regards,

Yuval Morad

Blog Post Author

September 6, 2021 at 4:03 pm

Do you deploy to ABAP or to BTP?

Mateo Suite

September 8, 2021 at 11:55 am

Hi Yuval Morad

SAP BTP Cloud Foundry runtime.

Regards,

Yuval Morad

Blog Post Author

September 8, 2021 at 12:00 pm

Does it work from HTML5 menu in BTP?

If yes

please notice that launchpad supports non UI5 apps only via direct url

please attach the screenshot of your app definition in the site

see in this blog the section

Create an application and enter the URL of the deployed application. (You can copy the URL from the React application browser). See Add a URL App to Your Launchpad Site.

Luiz Gomes

December 7, 2021 at 4:55 pm

on create app react in bas.

is possible run in vcsode localhost?

{"message":"@sapdmz/html5-project:app generator failed - process.on(uncaughtException) process.on(uncaughtException) process.on(uncaughtException) process.on(uncaughtException) process.on(uncaughtException) process.on(uncaughtException) process.on(uncaughtException) process.on(uncaughtException) process.on(uncaughtException) process.on(uncaughtException) Cannot read property 'find' of undefined","stack":"TypeError: Cannot read property 'find' of undefined\n at module.exports._setConnectivityData (/extbin/npm/globals/lib/node_modules/@sapdmz/generator-reactjs-module/generators/app/index.js:470:41)\n at module.exports._promptServiceMapping (/extbin/npm/globals/lib/node_modules/@sapdmz/generator-reactjs-module/generators/app/index.js:373:43)\n at module.exports.prompting (/extbin/npm/globals/lib/node_modules/@sapdmz/generator-reactjs-module/generators/app/index.js:59:46)\n at processTicksAndRejections (internal/process/task_queues.js:97:5)"}

Mujeeb Chowdry

May 11, 2022 at 1:21 pm

Is there any provision to add an existing Reactjs Project to BTP application. Backend is developed in BTP using nodejs/?

Yuval Morad

Blog Post Author

May 11, 2022 at 2:42 pm

if you create a destination to your node js app exposing odata the react template can consume it. if not you need to wire it manually to the template

Badhusha Akhthaar

November 22, 2022 at 7:54 am

Hi, I am getting File not found error when I added routing functionality to the app using react-router-dom.

Sandesh Agawane

February 20, 2023 at 5:59 am

Hi, Yuval Morad

very thankful for detail end to end process explanation in one place.

Waiting for many more blogs from you..

Thanks

Sandesh Agawane

Product Information

React Development with SAP Business Application Studio

Overview

Environment Setup

Create a React Project

Test Your React Application

Build and Deploy your React Application

Add your Application to a Launchpad

Conclusion

Assigned Tags