There are two ways to get your existing front-end applications running on Liferay DXP:
Migrate your project to a Liferay JS Toolkit project.
Since v2.15.0 of the Liferay JS Toolkit, create projects normally, as you would with create-react-app, Angular CLI (any project containing
@angular/clias a dependency or devDependency), and Vue CLI (any project containing
@vue/cli-serviceas a dependency or devDependency), and adapt them to run on Liferay DXP.
Only adapt your project if you intend it to be platform-agnostic. If you want to integrate with Liferay DXP fully and have access to all the features and benefits that it provides, migrate your project to a true Liferay JS Toolkit project instead.
To adapt your project, it must have the structure shown below:
Angular CLI projects must use
app-rootas the application’s Dom selector.
creact-react-app projects must use
ReactDom.render()call in your entry point with a
Vue CLI projects must use
#appas the application’s DOM selector.
When your project meets the requirements, you can follow these steps to use the Liferay JS Generator to adapt it:
Open the command line and navigate to your project’s folder.
Run the Liferay JS Generator’s
Answer the prompts. An example configuration appears below:
? Under which category should your widget be listed? category.sample ? Do you have a local installation of Liferay for development? Yes ? Where is your local installation of Liferay placed? /home/user/liferay
Your project is adapted to use the Liferay JS Toolkit and run on Liferay DXP!
The adapt process automatically adds a few npm scripts to the project’s
package.jsonso you can build and deploy your project to Liferay DXP. Note that you can swap
yarnbelow if you prefer to use yarn instead.
Run the command below to add a deployable JAR to the
build.liferayfolder in your project. For example, if you want to build the JAR and copy it to another app server, you can run this command:
npm run build:liferay
Run the command below to deploy the adapted app to your Liferay DXP instance:
npm run deploy:liferay
Great! Now you know how to use the Liferay JS Generator to adapt your existing apps to run on Liferay DXP. See the React Guestbook App for a working example of an adapted app.