The idea behind this tool is that you can download a Liferay page with JS portlets and remvoing the initialization.
It prepares a Liferay page for webpack.
npx lfr-js-portlet-bootstrapper
or
npx lfr-js-portlet-bootstrapper liferay.portlet.config.js
It generates a public folder with the following content:
- index.html (Indexpage for Webpack)
- parameters.json (data all JS portlet calls)
It scans for the following attribute on a HTML-tag:
- If the script finds selector it copies the id and generates a json file.
There are some drawbacks with the Liferay development and Vue. When you use the webpack you work around this problems.
The mains advantages are:
- No caching
- Build needs 1 sec
- Hotreload (reloads the page when build is finished)
- Vue Devtools are working
- Good Errormessages
- create a liferay.portlet.config.js in the root of the module.
- Add
auth.token.check.enabled=false
to the portal-ext.properties - Configure your http to redirect to webpack
module.exports = {
protocol: 'http',
host: 'localhost',
originPort: 8080,
port: 3000,
remove: {
script: [],
selector: '[id^=js-portlet-] + script'
},
initCall: {
selector: '[id^=js-portlet-] + script',
id: 'portletElementId'
}
}
But there is also the possiblity to only give the missing values and your and the default config get merged
npx liferay-js-portlet-bootstrapper
or
npx liferay-js-portlet-bootstrapper liferay.portlet.config.js