Skip to Content
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-app CLI tool.
  • Run the npm run build command

 

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.

5 Comments
You must be Logged on to comment or reply to a post.
  • 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.htm file?

      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.htm file does not correspond to where the files actually are.

      Note the full stop followed by a forward slash in my example ( ./static  ).

      <LINK HREF="./static/css/2.7480248d.chunk.css" REL="stylesheet">
      • 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:

          <head>  
            ...
            <link href="./static/css/main.ed4b9fa3.chunk.css" rel="stylesheet" />
          </head>
        
          <body>
            ....
            <script src="script.js"></script>
            <script src="./static/js/2.99a27799.chunk.js"></script>
            <script src="./static/js/main.60553794.chunk.js"></script>
          </body>

        When I point my browser to

        http://{mysapserver}/sap/bc/ui5_ui5/sap/z_mvnt_dash/index.htm

        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.

        http://{mysapserver}/sap/bc/ui5_ui5/sap/z_mvnt_dash/script.js
        http://{mysapserver}/sap/bc/ui5_ui5/sap/z_mvnt_dash/static/js/2.99a27799.chunk.js
        http://{mysapserver}/sap/bc/ui5_ui5/sap/z_mvnt_dash/static/js/main.60553794.chunk.js
        http://{mysapserver}/sap/bc/ui5_ui5/sap/z_mvnt_dash/static/css/main.ed4b9fa3.chunk.css

        which, to me, seems right.

         

        Any idea what might be going on?

         

        Trey

        /
  • 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