Tom and I have been working on a solution to share Fiori Launchpad Plugins with the SAP Community, we call it the Fiori Plugin Showcase. In this showcase, everyone is able to try out every plugin on a Sandbox Fiori Launchpad. You can try it out here: https://fiddlewookie.github.io/Launchpad/
More information on what it is can found in the blog of Tom: https://blogs.sap.com/2020/03/11/fiori-plugin-showcase-what-is-it/
Behind the scene of this Showcase, we came up with a build process that allows everyone to add his own plugin in an easy way. Here you can find all the steps to add your own plugin: https://blogs.sap.com/2020/03/11/fiori-plugin-showcase-add-your-plugin/
In this blog, I want to go into more technical details on how the build process works. First of all, we have two repositories:
Highlevel Build steps:
The build script is being executed by Travis CI on the repository that contains the list of plugins. This provides the build script access to the list of plugins. The build script needs to add the plugins to the other repository. Therefor, it will clone the repo of the Fiori Launchpad Sandbox, go into the folder of this clone and start installing every plugin from the list by using “npm install <name of the plugin>”. This will add all plugins from npm into the node_modules folder of the Fiori Launchpad repository, which will be added to the repository. After all plugins are installed, it will run the nodejs script to update the Fiori Launchpad Sandbox config. This is needed for the Launchpad to find the new plugins.
The Build exists out of 3 scripts:
The Travis CI script will run from the repository that contains the list of plugins.
Travis CI will start with the part defined in “before_script”. In this part, Travis will first clone the repository that contains the Launchpad, go into the folder of the clone and run “npm install”. “npm install” is needed for running the nodejs script that adds the plugin to the Fiori Launchpad Sandbox config.
After the before_script, Travis will execute a bash script which will install all the different Fiori plugins from the list. (this is explained in the next part)
In the last part after_script, Travis will commit and push the added plugins to the FLP repository.
Full script:
https://github.com/FiddleWookie/FioriLaunchpadExtensions/blob/master/.travis.yml
The bash script will load the file that contains the list of plugins “plugins.txt”. It will loop over the list to install each line as an npm package with “npm install”. After installing each plugin, the script will run a nodejs script that will add every plugin to the FLP config.
Full script:
https://github.com/FiddleWookie/FioriLaunchpadExtensions/blob/master/Build.sh
This nodejs script will search for the component file of the plugin to know to path. The component file is not always in the same place for every plugin project. It could be in the rool folder, “src” or “webapp” folder. Therefore, the script will search for the right path. After it found the path, it will load the file and use it to get the namespace. The script will use the path and namespace to add the plugin to the configuration file of the FLP Showcase.
Full code:
https://github.com/FiddleWookie/Launchpad/blob/master/build/addPlugin.js
We would be very happy if you would help us by sharing your plugins or improving this setup! You are all welcome to do pull requests on our GitHub repositories!
More information on what it is can found in the blog of Tom: https://blogs.sap.com/2020/03/11/fiori-plugin-showcase-what-is-it/
Behind the scene of this Showcase, we came up with a build process that allows everyone to add his own plugin in an easy way. Here you can find all the steps to add your own plugin: https://blogs.sap.com/2020/03/11/fiori-plugin-showcase-add-your-plugin/
In this blog, I want to go into more technical details on how the build process works. First of all, we have two repositories:
- https://github.com/FiddleWookie/Launchpad
- This repository contains the Fiori Launchpad Sandbox with a bit of logic to make it run on GitHub.
- We want to avoid that everyone should do changes to this repository to add a plugin. Therefore, we’ve created another repo which will contain the list of plugins and build script.
- It also includes a nodejs script to add the plugin to the Fiori Launchpad Sandbox config
- https://github.com/FiddleWookie/FioriLaunchpadExtensions
- This is the repository where everyone can add a reference to his plugin on NPM
- It contains the build process
- Each commit will trigger the build process and add the plugin to the other repository
Highlevel Build steps:
The build script is being executed by Travis CI on the repository that contains the list of plugins. This provides the build script access to the list of plugins. The build script needs to add the plugins to the other repository. Therefor, it will clone the repo of the Fiori Launchpad Sandbox, go into the folder of this clone and start installing every plugin from the list by using “npm install <name of the plugin>”. This will add all plugins from npm into the node_modules folder of the Fiori Launchpad repository, which will be added to the repository. After all plugins are installed, it will run the nodejs script to update the Fiori Launchpad Sandbox config. This is needed for the Launchpad to find the new plugins.
The Build exists out of 3 scripts:
- Travis CI script which will clone the Fiori Launchpad Showcase Sandbox (FLP) repository, run a bash script and push the changes to the FLP repo at the end.
- Bash script that will read the list of plugins and loop over the list. It will add each plugin to FLP folder as an NPM module and add it to the FLP config.
- NodeJS script to update the Fiori Launchpad Sandbox config with the configuration of each plugin. The bash script will run this script for each plugin.
Travis CI
The Travis CI script will run from the repository that contains the list of plugins.
Travis CI will start with the part defined in “before_script”. In this part, Travis will first clone the repository that contains the Launchpad, go into the folder of the clone and run “npm install”. “npm install” is needed for running the nodejs script that adds the plugin to the Fiori Launchpad Sandbox config.
After the before_script, Travis will execute a bash script which will install all the different Fiori plugins from the list. (this is explained in the next part)
In the last part after_script, Travis will commit and push the added plugins to the FLP repository.
Full script:
https://github.com/FiddleWookie/FioriLaunchpadExtensions/blob/master/.travis.yml
Bash script
The bash script will load the file that contains the list of plugins “plugins.txt”. It will loop over the list to install each line as an npm package with “npm install”. After installing each plugin, the script will run a nodejs script that will add every plugin to the FLP config.
Full script:
https://github.com/FiddleWookie/FioriLaunchpadExtensions/blob/master/Build.sh
Build/addPlugin.js nodejs script
This nodejs script will search for the component file of the plugin to know to path. The component file is not always in the same place for every plugin project. It could be in the rool folder, “src” or “webapp” folder. Therefore, the script will search for the right path. After it found the path, it will load the file and use it to get the namespace. The script will use the path and namespace to add the plugin to the configuration file of the FLP Showcase.
Full code:
https://github.com/FiddleWookie/Launchpad/blob/master/build/addPlugin.js
We would be very happy if you would help us by sharing your plugins or improving this setup! You are all welcome to do pull requests on our GitHub repositories!
- SAP Managed Tags:
