Skip to Content

Build Skeleton React and UI5 Projects

Create skeleton React and UI5 projects and install Luigi.
You will learn
  • How to create a skeleton React project
  • How to create a skeleton UI5 project
  • How to add Luigi and other dependencies to your project
alexandra-simeonovaAleksandra SimeonovaJanuary 27, 2022
Created by
alexandra-simeonova
November 12, 2020
Contributors
alexandra-simeonova

Prerequisites

  • It is recommended to try the simpler examples on GitHub or the Getting Started page before this tutorial.
  • You need to install Node.js. If you already have an old version installed on your machine, please run npm install npm@latest -g.
  • You need to install SAP Fonts.
  • Step 1

    In this step, you will create a React skeleton project which will be used to create your Luigi app.

    1. Open a Terminal or Command Prompt window and navigate to the space where you want to install the app. Then create a new folder:

      Shell
      Copy
      mkdir luigi-react-ui5
      cd luigi-react-ui5
      
    2. Copy and paste this command into the Terminal/Command Prompt to create a React app. This may take a few minutes:

      Shell
      Copy
      npx create-react-app react-core-mf && cd react-core-mf
      
    3. Eject the project to customize the webpack configuration. If you get an error, you need to commit any changes before running the command. More information can be found here.:

      Shell
      Copy
      echo yes | npm run eject
      

    4. Install dependencies:
      Shell
      Copy
      npm i -P @luigi-project/core @luigi-project/client fundamental-styles@0.11.0 @sap-theming/theming-base-content react-router-dom @ui5/webcomponents @ui5/webcomponents-react
      npm i copy-webpack-plugin@5 webpack webpack-cli @babel/core @babel/preset-env babel-loader --save-dev
      

    5. Replace strings (these commands have been adapted from the standard Luigi React example.) Note that you may get a warning such as event not found, but this can safely be ignored. Copy and paste the following:
      Shell
      Copy
      sed "s/const HtmlWebpackPlugin = require('html-webpack-plugin');/const HtmlWebpackPlugin = require('html-webpack-plugin');const CopyWebpackPlugin = require('copy-webpack-plugin');/g" config/webpack.config.js > config/webpack.config.tmp.js && mv config/webpack.config.tmp.js config/webpack.config.js
      
      sed "s/new HtmlWebpackPlugin(/new CopyWebpackPlugin([\
      {context: 'public', to: 'index.html', from: 'index.html'  },\
      {context: 'node_modules\/@luigi-project\/core',to: '.\/luigi-core',from: {glob: '**',dot: true}}],\
      {ignore: ['.gitkeep', '**\/.DS_Store', '**\/Thumbs.db'],debug: 'warning'\
      }),\
      new HtmlWebpackPlugin(/g" config/webpack.config.js > config/webpack.config.tmp.js && mv config/webpack.config.tmp.js config/webpack.config.js
      
      sed "s/template: paths.appHtml,/template: paths.appHtml,\
      filename: 'sampleapp.html',/g" config/webpack.config.js > config/webpack.config.tmp.js && mv config/webpack.config.tmp.js config/webpack.config.js
      
      sed "s/public\/index.html/public\/sampleapp.html/g" config/paths.js > config/paths.tmp.js && mv config/paths.tmp.js config/paths.js
      
      sed "s/publicUrl + '\/index.html',/publicUrl + '\/sampleapp.html',/g" config/webpack.config.js > config/webpack.config.tmp.js && mv config/webpack.config.tmp.js config/webpack.config.js
      
      sed "s/const isWsl = require('is-wsl');//g" config/webpack.config.js > config/webpack.config.tmp.js && mv config/webpack.config.tmp.js config/webpack.config.js
      
      #This can throw a warning, it can be ignored
      sed "s/!isWsl/true/g" config/webpack.config.js > config/webpack.config.tmp.js && mv config/webpack.config.tmp.js config/webpack.config.js
      
      echo "const path = require('path');
      module.exports = {
          entry: './src/luigi-config/luigi-config.es6.js',
          output: {
              filename: 'luigi-config.js',
              path: path.resolve(__dirname, 'public'),
          },
      };">webpack.config.js
      
      sed 's/"scripts": {/"scripts": {\
      \    "buildConfig":"webpack --config webpack.config.js",/1' package.json > p.tmp.json && mv p.tmp.json package.json
      
      echo '{
          "globals": {
              "Luigi": "readonly"
          }
      }'>.eslintrc.json
      
    6. Create a new folder:

      Shell
      Copy
      mkdir -p src/luigi-config
      mkdir src/views
      

    7. Download the Luigi React configuration:
      Shell
      Copy
       curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-react/public/luigi-config.js > src/luigi-config/luigi-config.es6.js
      
    8. Ins​tall and run the configuration:

      Shell
      Copy
      npm i
      npm run buildConfig
      

    9. Move back into the root directory:
      Shell
      Copy
      cd ..
      
  • Step 2

    In this step, you will create a skeleton UI5 project for your UI5 micro-frontend.

    1. If you didn’t already, navigate to the root folder of your project in the terminal.

    2. Create a new folder:

      Shell
      Copy
      mkdir ui5-mf && cd ui5-mf
      
    3. Install the UI5 project generator:

      Shell
      Copy
      npm install -g yo generator-easy-ui5
      
    4. Enter this command in the Terminal/Command Prompt:

      Shell
      Copy
      yo easy-ui5
      
    5. Choose generator-ui5-project. Use the following settings:

      UI5 Terminal

    Which technology will you use to create the Luigi Core app?

Back to top