Technical Articles
How to run ReactJS web apps in SAP
To run ReactJS applications within SAP, I recommend creating a new BSP application and essentially mimicking the serve -s build command in NodeJS (providing your React application is bootstrapped with create-react-app).
Prerequisites:
- Create a React web application with the
create-react-appCLI tool. - Run the
npm run buildcommand
Step by step tutorial:
1) Create a bespoke (Z) BSP Application in SE80.
Add an index.htm file within the Pages with Flow Logic folder of your bespoke BSP Application in SAP.
2) Copy the contents of your react-app/build/index.html file into the index.htm file of the BSP application in SAP.
Your React generated index.html file should look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="/manifest.json" />
<link
href="//unpkg.com/fiori-fundamentals@latest/dist/fiori-fundamentals.min.css"
rel="stylesheet"
/>
<title>Name of your React App</title>
<link href="/static/css/2.01ad9b74.chunk.css" rel="stylesheet" />
<link href="/static/css/main.36497136.chunk.css" rel="stylesheet" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>
// ... some generated script
</script>
<script src="/static/js/2.f0e93c7f.chunk.js"></script>
<script src="/static/js/main.500df8a2.chunk.js"></script>
</body>
</html>
3) Copy (Ctrl + X) the contents of the script tag which contains inline JavaScript (just underneath the div with the ID of root);
<script>
// ... some generated script
</script>And replace it with:
<SCRIPT SRC="script.js"></SCRIPT>
4) Create a script.js file within your MIMEs folder of the BSP Application you created in step 1.
5) Paste the contents of the script you copied in step 3. Just make sure the code is pure JavaScript and contains no HTML or <script> tags.
6) Create the following folders within your MIMEs folder of the BSP Application.
/static
/css
/js
7) Create the corresponding css and js files that were generated as part of your React/ NodeJS build command in the above two folders.
For example:
// for the following stylesheets and scripts
<LINK HREF="./static/css/2.7480248d.chunk.css" REL="stylesheet">
<LINK HREF="./static/css/main.5facb584.chunk.css" REL="stylesheet">
<SCRIPT SRC="./static/js/2.24f01946.chunk.js"></SCRIPT>
<SCRIPT SRC="./static/js/main.fe078c32.chunk.js"></SCRIPT>
8) Make sure you have copied across all of the React minified js and css file contents into their corresponding BSP Application files.
And that’s it.
Don’t forget to Save & Activate everything.
You can include any additional links or reference files which get generated as part of your build command by following the above steps.
Your completed index.htm should look something like this:
<!doctype HTML>
<HTML LANG="en">
<HEAD>
<META CHARSET="utf-8" />
<LINK REL="shortcut icon" HREF="./favicon.ico" />
<META NAME="viewport" CONTENT="width=device-width,initial-scale=1" />
<META NAME="theme-color" CONTENT="#000000" />
<LINK REL="manifest" HREF="./manifest.json" />
<TITLE>Name of your React App</TITLE>
<LINK HREF="./static/css/2.7480248d.chunk.css" REL="stylesheet">
<LINK HREF="./static/css/main.5facb584.chunk.css" REL="stylesheet">
</HEAD>
<BODY>
<NOSCRIPT>You need to enable JavaScript to run this app.</NOSCRIPT>
<DIV ID="root"></DIV>
<SCRIPT SRC="script.js"></SCRIPT>
<SCRIPT SRC="./static/js/2.24f01946.chunk.js"></SCRIPT>
<SCRIPT SRC="./static/js/main.fe078c32.chunk.js"></SCRIPT>
</BODY>
</HTML>
Your folder structure should look something like this:
And you should be able to access the web app by right clicking the BSP Application in SE80 and pressing the Test option (just underneath Activate).
This method should work for a myriad of popular front-end frameworks such as Angular or Vue. Just make sure you follow the build process of your front-end framework of choice and upload the generated files to your SAP system as a BSP application as described above.
Hope this helps.
Hi Vitaliy,
I followed the steps, but somehow the js folder is not gettting loaded while testing the application, can you please suggest if I am missing some step? Thank you.
Would you mind sharing the contents of your
index.htmfile?I believe the issue is that the path does not match for the scripts you’re trying to use.
In other words, the location you’re stating in your
index.htmfile does not correspond to where the files actually are.Note the full stop followed by a forward slash in my example (
./static).Hi Vitaliy,
Thanks for the writeup!
EDIT: For anyone coming afterwards, I was able to solve (read: workaround) my problem by uploading from SAPUI5 tools Eclipse. Basically I just started a new SAPUI5 project, replaced the index.html with my own, and put the script.js file and static folder in the WebContent folder in Eclipse then pushed it. Not ideal, but it's an OK backup if anyone needs it.
I am experiencing a similar issue even after adjusting the paths to the static files to have a full stop in front of them. Here is my folder structure for the application:
And here are the links referencing those files in the index.htm:
When I point my browser to
it loads the title of the web page, but all the subsequent calls for the files result in a 404. The urls for the files subsequently requested look like.
which, to me, seems right.
Any idea what might be going on?
Trey
Hi!
Try using "homepage" parameter
Since you are using React maybe you can consider using https://sap.github.io/fundamental-react as it offers already React components on top of Fundamental Library Styles
How do you handle refreshing the page when inside a different route?
On initial load, the BSPs default htm-file, e.g. the index.htm or default.htm gets loaded. You can also refresh this page easily in the browser because the page is just served again.
But what if you want to be able to refresh when you are inside a route, e.g. '/posts' or something like that (which is fairly common, even in SPAs)? With the solution provided in this blog, you'll get an 404 error when navigating to a different 'page' and then trying to refresh the page (which is logical because the server cannot resolve a path like: <system-path>:<port>/something).
I tried to make a workaround but I guess this is the limit of the compatibility between the BSP technology and an SPA, or did you find another solution for that?
Marcel
Hi,
I am trying to deploy the react application in on-premise SAP Netweaver Gateway. Followed the steps mentioned in your blog but while running the application, I can see the files are being loaded but none of the APIs are getting called.
Please guide what I am missing here
Thanks,
Jitesh
Hi
Would you mind sharing the contents of your "API calls" file?