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
![Installing Liferay JS Generator | TypeScript and React with Liferay Installing Liferay JS Generator](https://www.ignek.com/wp-content/uploads/2024/02/Installing-Liferay-JS-Generator-1024x403.webp)
- Create a typescript module and give the Lifeay portlet a name.
npx create-react-app < portlet_name > --template typescript
![Creating React Portlet with TypeScript Template | TypeScript and React with Liferay Creating React Portlet with TypeScript Template](https://www.ignek.com/wp-content/uploads/2024/02/Creating-React-Portlet-with-TypeScript-Template-1024x536.webp)
- 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
![Adapting React Portlet for Liferay | TypeScript and React with Liferay Adapting React Portlet for Liferay](https://www.ignek.com/wp-content/uploads/2024/02/Adapting-React-Portlet-for-Liferay.webp)
- 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
![Configuring React with TypeScript Module for Widget List | TypeScript and React with Liferay Configuring React with TypeScript Module for Widget List](https://www.ignek.com/wp-content/uploads/2024/02/Configuring-React-with-TypeScript-Module-for-Widget-List-1024x534.webp)
- Now deploy the module on liferay server and generate build file following this command
npm run deploy:liferay
![Deploying React with TypeScript Module to Liferay | TypeScript and React with Liferay Deploying React with TypeScript Module to Liferay](https://www.ignek.com/wp-content/uploads/2024/02/Deploying-React-with-TypeScript-Module-to-Liferay-1024x508.webp)
- Add the deploy command to the package.json > “scripts” file.
"deploy": "npm run build:liferay && lnbs-deploy"
![Deploy Script for Liferay | TypeScript and React with Liferay Deploy Script for Liferay](https://www.ignek.com/wp-content/uploads/2024/02/Deploy-Script-for-Liferay.webp)
- After that, deploy on liferay server
npm run deploy
![Running Deployment Script | TypeScript and React with Liferay Running Deployment Script](https://www.ignek.com/wp-content/uploads/2024/02/Running-Deployment-Script-1024x428.webp)
- 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.
![Deploying React App as Widget 1 | TypeScript and React with Liferay Deploying React App as Widget](https://www.ignek.com/wp-content/uploads/2024/02/Deploying-React-App-as-Widget-1-1024x478.webp)
![Successful Rendering of React TypeScript Application | TypeScript and React with Liferay Successful Rendering of React TypeScript Application](https://www.ignek.com/wp-content/uploads/2024/02/Successful-Rendering-of-React-TypeScript-Application-1024x478.webp)
Discover the power of ReactJS Application Architecture. Streamline development with scalable, efficient structures. Master component-based design and state management for robust, flexible apps. Elevate your coding game with ReactJS architecture! Check out our “Hire Us” services to get started.