Skip to Content

Build Skeleton React and UI5 Projects

test
0 %
Build Skeleton React and UI5 Projects
Details

Build Skeleton React and UI5 Projects

November 12, 2020
Created by
November 12, 2020
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

Prerequisites


Step 1: Create React app

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:

    mkdir luigi-react-ui5
    cd luigi-react-ui5
    
  2. To create the React apps, use the commands:

    npm i create-react-app
    

    and:

    npx create-react-app react-core-mf
    
Log on to answer question
Step 2: Install dependencies

If you haven’t already done so, make sure you install SAP Fonts.

In this step, you will install Luigi and its related dependencies, such as Fundamental Styles which the Luigi UI is based on.
You will also install webpack (a static module bundler) which will be useful for building your application.

  1. Navigate to your core app:

    cd react-core-mf
    
  2. Install dependencies:

    npm i -P @luigi-project/core @luigi-project/client fundamental-styles fundamental-react @sap-theming/theming-base-content react-router-dom
    

    and:

    npm i copy-webpack-plugin webpack webpack-cli @babel/core @babel/preset-env babel-loader --save-dev
    
Log on to answer question
Step 3: Create UI5 micro-frontend

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

  1. Navigate to the root folder of your project.

  2. Create a new folder:

    mkdir ui5-mf
    cd ui5-mf
    
  3. Generate a new UI5 project:

    npm install -g yo generator-easy-ui5
    
  4. Type yo in the terminal and use the following settings:

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

Next Steps

Back to top