Prior to the implementation of Luigi, you need to set up your application. This document shows you how to set up a web application using the Luigi micro front-end framework.
Choose the framework to build your application:
Application setup without a framework
Angular 6
SAPUI5/OpenUI5
VUE.JS
Follow these steps to build a web application based on Luigi:
- Add Luigi npm packages to your project dependencies.
npm install --save @kyma-project/luigi-core
npm install --save @kyma-project/luigi-client
- Give Luigi exclusive control over the entry
index.htmlfile. If you have a single page application, transfer it to a two-page application. Your app should run to make sure the existing router doesn't interfere. - Define your Luigi navigation configuration.
- Start your server to run the application.
The examples on this page demonstrate commands that perform each of the necessary steps to set up your application. Each set of commands is grouped by the framework on which you execute it.
NOTE: You need a development server capable of hosting Single Page Applications. The recommended server is Live Server.
- If you do not have Live Server installed, use this command to install it.
npm install -g live-server
- Use the following commands to create a directory for your application, install Luigi, make assets available, and start your local server.
$ mkdir my-plain-app && cd my-plain-app
$ npm init -y
$ npm i -S @kyma-project/luigi-core@latest @kyma-project/luigi-client@latest fundamental-ui@latest
$ mkdir -p public/assets
$ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/index.html > public/index.html
$ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/assets/sampleexternal.html > public/assets/temp.html
$ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/assets/basicConfiguration.js > public/assets/sampleconfig.js
$ cp -r node_modules/\@kyma-project/luigi-* public
$ live-server --entry-file=index.html public
NOTE: The Angular CLI is a prerequisite for this example.
-
If you do not have the Angular CLI installed, download and install it from this URL.
-
Use the following commands to create your application, install Luigi, make assets available, and serve your application.
$ ng new my-dream-app --routing && cd my-dream-app
$ npm i -S @kyma-project/luigi-core@latest @kyma-project/luigi-client@latest fundamental-ui@latest
$ mv src/index.html src/angular.html
$ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/index.html > src/index.html
$ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/assets/basicConfiguration.js > src/assets/sampleconfig.js
$ sed 's/"src\/index.html"/"src\/angular.html"/g' angular.json > tmp.json && mv tmp.json angular.json
$ sed 's/"src\/assets"/"src\/assets","src\/index.html", {"glob": "fundamental-ui.min.css", "input": "node_modules\/fundamental-ui\/dist","output": "\/fundamental-ui"}, {"glob": "fonts\/**","input": "node_modules\/fundamental-ui\/dist","output": "\/fundamental-ui"}, {"glob": "SAP-icons.*","input": "node_modules\/fundamental-ui\/dist","output": "\/fundamental-ui"}, {"glob": "**","input": "node_modules\/@kyma-project\/luigi-core", "output": "\/luigi-core"},{"glob": "**","input": "node_modules\/@kyma-project\/luigi-client","output": "\/luigi-client"}/g' angular.json > tmp.json && mv tmp.json angular.json
$ ng serve
NOTE: Live Server must be installed as your development server.
- If you do not have Live Server installed, use this command to install it.
npm install -g live-server
- Use the following commands to create a directory for your application, install Luigi, make assets available, and start your local server.
$ mkdir my-ui5-app && cd my-ui5-app
$ npm init -y
$ npm i -S @kyma-project/luigi-core@latest @kyma-project/luigi-client@latest fundamental-ui@latest
$ mkdir -p public/assets
$ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/index.html > public/index.html
$ curl https://raw.githubusercontent.com/SAP/openui5/master/src/sap.m/test/sap/m/demokit/helloworld/index.html | sed 's/src="..\/..\/..\/..\/..\/resources\/sap-ui-core.js"/src="https:\/\/openui5.hana.ondemand.com\/resources\/sap-ui-core.js"/g' > public/ui5.html
$ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/assets/basicConfiguration.js > public/assets/sampleconfig.js
$ cp -r node_modules/\@kyma-project/luigi-* public
$ live-server --entry-file=index.html public
NOTE: The VUE CLI is a prerequisite for this example.
- If you do not have VUE CLI installed, use this command to install it.
npm install -g @vue/cli
- Use the following commands to create a directory for your application, install Luigi, make assets available, and start your local server.
$ vue create -d my-vue-app && cd my-vue-app
$ npm i -S @kyma-project/luigi-core@latest @kyma-project/luigi-client@latest fundamental-ui@latest
$ mkdir -p public/assets
$ mv public/index.html public/vue.html
$ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/index.html > public/index.html
$ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/assets/basicConfiguration.js > public/assets/sampleconfig.js
$ echo "const webpack=require('webpack');const CopyWebpackPlugin=require('copy-webpack-plugin');module.exports={pages:{sampleapp:{entry:'src/main.js',template:'public/vue.html',filename:'vue.html'}},lintOnSave:true,runtimeCompiler:true,outputDir:'dist',configureWebpack:{plugins:[new CopyWebpackPlugin([{context:'public',to:'index.html',from:'index.html'},{context:'node_modules/@kyma-project/luigi-core',to:'./luigi-core',from:{glob:'**',dot:true}},{context:'node_modules/@kyma-project/luigi-client',to:'./luigi-client',from:{glob:'**',dot:true}}],{ignore:['.gitkeep','**/.DS_Store','**/Thumbs.db'],debug:'warning'})]}};" > vue.config.js
$ npm run serve