Build Skeleton React and UI5 Projects
- 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
- 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.
-
Open a Terminal or Command Prompt window and navigate to the space where you want to install the app. Then create a new folder:
ShellCopymkdir luigi-react-ui5 cd luigi-react-ui5
-
Copy and paste this command into the Terminal/Command Prompt to create a React app. This may take a few minutes:
ShellCopynpx create-react-app react-core-mf && cd react-core-mf
-
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.:ShellCopyecho yes | npm run eject
- Install dependencies: ShellCopy
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
- 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:ShellCopysed "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
-
Create a new folder:
ShellCopymkdir -p src/luigi-config mkdir src/views
- Download the Luigi React configuration: ShellCopy
curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-react/public/luigi-config.js > src/luigi-config/luigi-config.es6.js
-
Install and run the configuration:
ShellCopynpm i npm run buildConfig
- Move back into the root directory: ShellCopy
cd ..
-
- Step 2
In this step, you will create a skeleton UI5 project for your UI5 micro-frontend.
-
If you didn’t already, navigate to the root folder of your project in the terminal.
-
Create a new folder:
ShellCopymkdir ui5-mf && cd ui5-mf
-
Install the UI5 project generator:
ShellCopynpm install -g yo generator-easy-ui5
-
Enter this command in the Terminal/Command Prompt:
ShellCopyyo easy-ui5
-
Choose
generator-ui5-project
. Use the following settings:
Which technology will you use to create the Luigi Core app?
-