Creating a Liferay Portlet using Typescript + React
Introduction
Hi guys, I know I’ve been away from months but that’s life. I’ll always try to create new articles when I feel I need to talk about something.
So, since the last week I’ve been studying about Liferay and its ecossystem, and the first thing I noticed is its incredible learning curve.
One of the difficulties that I had was to create a simple Porlet using React + Typescript and that’s the reason why I’m creating this article.
So, after spend my whole morning trying to find any kind of document explaning about this and trying to figure it out how to do it, I finally discovered.
So, as there isn’t any article or tutorial teaching exacly this, I felt that I should contribute with the community and create one, so here it goes.
The Problem
The first thing I knew about Liferay is they have different ways to do the same thing and this can be very frustating if you’re seeing this for the first time. This is the simplest path that I found but it’s not the only one.
First of all, let’s check it out the folder structure of a simple Liferay workspace
Open your terminal and let’s go to modules folder
Now that we’re here, let’s add these dependencies to npm
npm install -g yo generator-liferay-js
Yo is a kickstarter package where you can start new projects easily using pre-configured templates and generator-liferay-js is a template that will be executed by Yo.
Once you’ve installed all these dependencies, you’re ready to install a fresh application. Let’s use Create React App to do it.
npx create-react-app <portlet_name> --template typescript
While the project is being created, you probably are wondering: So, where the Yo part comes in? Simple, now that we have the project created, we are going to adapt it to a Liferay project style using it.
cd <portlet_name> && yo liferay-js:adapt
The adaptation process will start and you’ll be asked about some changes that Yo will do.
After answer all options above, you will be confronted with a conflict. Yo wants to change the package.json in order to add dependencies that Liferay needs.
All you need to do is type “y” and press enter.
If you’d like to see more about Yo will do, you can press enter without type nothing. It will show to you all Yo available options.
After overwrite package.json and .gitignore, your React + Typescript portlet will be ready to work in Liferay.
Extra
Probably some questions will come up on your mind, so I’m gonna answer all here.
1- How do I start the projectt?
Just run npm run start as you would do in a common application
2- How do I deploy to Liferay?
Use the command npm run deploy:liferay
3- Is there any kind of hot reload where I can run the project directly on Liferay?
No. The only option you have is to test the widget separately. If you want to test it on Liferay environment, you need to use npm run deploy:liferay
3- So, if I need to use something of Liferay like themes, Liferay variable. What will I do?
You will need to use npm run deploy:liferay every time you want to see the changes applied to.
End
That’s all folks. See you next time. Bye!
