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.

2 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">