React é uma biblioteca JavaScript que te permite criar páginas dinâmicas com componentes altamente reutilizáveis. É uma das bibliotecas mais populares da comunidade JS e por isso, você, desenvolvedor Liferay, com certeza não vai querer ficar de fora dessa. 

Com o Liferay você consegue utilizar facilmente o React, ou outras bibliotecas e frameworks JS, para compor suas páginas. Hoje iremos descobrir como integrar um widget do Liferay com uma aplicação React.

Por que usar React no Liferay?

O React facilita a criação de layouts complexos com javascript. No Liferay, é muito comum construir telas utilizando Freemarker. Ele é um template engine utilizado na construção de modelos no Liferay, o que acaba compondo a maior parte das páginas.

É uma tecnologia baseada em Java e pode não ser acessível para todo mundo. Por isso, existem momentos em que utilizar uma ferramenta como o React acelera drasticamente a produtividade do projeto.

Como ele se integra com o Liferay?

Widget (também chamado de Portlet) pode ser pensado como qualquer componente que representa uma seção de uma página que possui um backend e um frontend independente.

Existem vários tipos de widget, e o que vamos ver hoje é um widget específico para disponibilizar uma aplicação react que poderá ser instanciada em qualquer página do seu servidor Liferay.

Vale ressaltar que existem outras maneiras de integrar uma aplicação React nos seu portal, como React Fragments  e Remote Apps.

Além do React Widget, o Liferay disponibiliza uma API headless completa com vários endpoints que te permitem interagir diretamente com os dados do seu servidor, como Conteúdos Web, Usuários ou até mesmo Permissões.

Botando a mão na massa

No nosso canal do YouTube nós temos um vídeo explicando passo a passo como implementar do zero um React Widget. Confere lá e se inscreva no canal!

 

 

O primeiro passo é subir um ambiente Liferay. Caso você não saiba como, nós temos 2 vídeos ensinando a subir um servidor do zero. Esse é para um ambiente Linux e esse é para um ambiente Windows.

Depois de subir seu servidor, você precisa criar o módulo dentro do seu workspace. Para isso, iremos utilizar o Liferay CLI, uma ferramenta de linha de comando criada pela Liferay para facilitar a criação de aplicações JavaScript e que veio para substituir o famigerado Yeoman.

Instale ele pelo com seu gerenciador de pacotes de preferência, aqui utilizamos o npm:

 

npm install -g @liferay/cli

 

Agora entre na pasta modules do seu workspace

 

cd <raíz do workspace>/modules

 

Crie o módulo (substitua <news-react-widget> pelo nome do seu módulo)

 

liferay new news-react-widget

 

Selecione Liferay Plataform Project 

 

 

Passe uma pequena descrição do seu projeto

 

 

Escolha a versão do seu portal. Note que CE significa Comunity Edition, ou seja, é a versão gratuita do Liferay. Já DXP é a versão Enterprise, que é paga. Aqui escolhemos a versão Liferay Portal CE 7.4 (cuidado para não selecionar a versão com a opção “not sharing platform's packages”, esse detalhe ficará para um outro post)

 

 

Escolha o React como tipo do projeto. Aqui podemos ver o suporte que o Liferay oferece por padrão para Angular e Vue.js

 

 

Por fim, escolha o nome da categoria onde o seu Widget será exibido no portal. Essa categoria será exibida no menu de Widgets do seu portal. Nossa categoria se chamará Simplify

 

 

Se agora abrirmos nosso projeto no VS Code, podemos ver que foi criado um módulo no nosso workspace

 

 

Para fazer o deploy desse módulo, basta entrar na pasta e executar o comando de deploy do gradlew

 

cd news-react-widget

blade gw deploy

 

O Liferay CLI também disponibiliza um comnado para realizar o deploy, porém ele é um pouco instável, por isso recomendamos utilizar sempre o blade

 

Caso você ainda não tenha o blade instalado, dá uma olhada no nosso vídeo Instalando e mostrando o BLADE NA PRÁTICA

 

Agora basta entrar no seu servidor Liferay e arrastar seu novo React Widget para dentro de uma página!

 

 

Nessa versão que estou utilizando (Liferay CE 7.4-ga102) acontece um bug onde o React Widget criado aparece sem o nome no painel de Widgets

 

 

Para resolver este problema, basta adicionar a seguinte linha no arquivo package.json no módulo gerado e fazer o deploy novamente

 

 

Seu widget instanciado na página deve se parecer com o da imagem abaixo

 

 

Ele apenas exibe alguns metadados do widget e suas configurações.

 

Esses são todos os passos necessários para criar e fazer o deploy de um React Widget. Para qualquer modificação feita no código do módulo, você precisa realizar novamente o deploy dele.

 

Até a próxima!