Introduction:
Building solid and user-friendly applications requires keeping up with the most recent technological advancements in the field of web development. Because they make the development process more efficient and enable the creation of dynamic, interactive user interfaces, TypeScript and React have become incredibly popular. These technologies provide web developers with a potent combo when paired with Liferay, a strong content management system. In this blog post, we’ll look at how TypeScript and React may be integrated with Liferay to accelerate your web development project.
Here are two steps to follow for using TypeScript and React with Liferay.
- Benefits of using Typescript and React with Liferay
- Create a Typescript module in Liferay
Benefits of using Typescript and React with Liferay
- Using TypeScript and React with Liferay provides enhanced type safety, developer experience, code maintainability, ecosystem compatibility, scalability, performance, and community support, making it an ideal choice for modern web development within the Liferay platform.
- TypeScript promotes code maintainability by making it more self-documenting and comprehensible, which is invaluable in larger projects or when collaborating with other developers.
- React.Js component-based architecture aligns seamlessly with Liferay’s portlet development, promoting modular and reusable components.
Create a Typescript module in Liferay
The steps for implementing a Typescript module in Liferay are as follows.
- Open the terminal in the directory where you intend to place the Typescript module and use this npm command.
npm install -g yo generator-liferay-js
- Create a typescript module and give the Lifeay portlet a name.
npx create-react-app < portlet_name > --template typescript
- We have the module created, and we are going to adapt it to a Liferay project style using it
cd < portlet_name > && yo liferay-js:adapt
- Next, give the name of your React with Typescript module in the widget list.
- If you want localization support, then write yes; otherwise, no.
- Add your liferay path where your liferay is placed.
- After answering all the options above, you will be confronted with a conflict. You want to change the package. json in order to add dependencies that Liferay needs.
- All you need to do is say yes because, without conflict, a file will be created, than press enter
- Now deploy the module on liferay server and generate build file following this command
npm run deploy:liferay
- Add the deploy command to the package.json > “scripts” file.
"deploy": "npm run build:liferay && lnbs-deploy"
- After that, deploy on liferay server
npm run deploy
- Your React app is deployed and now available as a widget that you can add to site pages. First, go to widgets tab > User Web > Drag and drop typescript-test-module > Publish.
