How to run ReactJS web apps in SAP

former_member639311 · ‎11-27-2019

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="https://blogs.sap.com/favicon.ico" />

    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <meta name="theme-color" content="#000000" />

    <link rel="manifest" href="https://blogs.sap.com/manifest.json" />

    <link

      href="https://blogs.sap.com//unpkg.com/fiori-fundamentals@latest/dist/fiori-fundamentals.min.css"

      rel="stylesheet"

    />

    <title>Name of your React App</title>

    <link href="https://blogs.sap.com/static/css/2.01ad9b74.chunk.css" rel="stylesheet" />

    <link href="https://blogs.sap.com/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>

😎 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.