Build Skeleton React and UI5 Projects

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
   

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
   

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: