@liferay-react/boilerplate-shared

Conjunto de ferramentas, componentes e padrões para aceleração de desenvolvimento de Portlets React no Liferay DXP.

🔗 GitHub: Benhur-Silveira/gx2-react-liferay-boilerplate-shared

Este pacote oferece uma base sólida para a criação de micro-frontends baseados em React para o ecossistema Liferay, incluindo um utilitário CLI para scaffolding e uma biblioteca compartilhada de utilitários.

🚀 Funcionalidades Principais

• CLI Scaffolding: Crie novos projetos Liferay-React pré-configurados em segundos.
• Componentes React: Componentes de UI padronizados e reutilizáveis (ex: Button).
• Hooks Customizados: Abstrações úteis como useMediaQuery.
• Serviços de API: Instância do Axios pré-configurada com tokens de autenticação do Liferay.
• Máscaras e Validações: Suporte para padrões brasileiros (CPF/CNPJ).
• Integração Liferay: Configurado nativamente para liferay-npm-bundler.

🛠️ Instalação e Uso do CLI

Para criar um novo projeto baseado neste boilerplate, você pode usar o utilitário CLI diretamente via npx:

npx @liferay-react/boilerplate-shared

Instalação Global (Opcional)

Se preferir ter o comando sempre disponível no seu terminal, instale globalmente:

npm install -g @liferay-react/boilerplate-shared

Após a instalação, você pode iniciar um novo projeto apenas digitando:

create-shared-boilerplate

O CLI irá guiá-lo através de algumas perguntas:

1. Nome do projeto: O diretório que será criado.
2. Caminho do Liferay: Localização do seu bundle Liferay para deploy automático.

Componentes

import { Button } from "{{PROJECT_NAME}}";

const MyComponent = () => (
  <Button variant="primary" onClick={() => console.log("Click!")}>
    Clique Aqui
  </Button>
);

Services (Axios)

A instância apiLiferay já vem configurada com os headers x-csrf-token e X-Liferay-Auth-Token necessários para requisições autenticadas no portal.

import { apiLiferay } from "{{PROJECT_NAME}}";
const fetchData = async () => {
  const response = await apiLiferay.get("/my-headless-api/v1.0/resource");
  return response.data;
};

⚙️ Scripts de Desenvolvimento

Se você estiver contribuindo para este boilerplate ou desenvolvendo localmente:

| Comando | Descrição | | :--------------- | :-------------------------------------------------------------- | | npm run build | Compila os arquivos src para build usando Babel. | | npm run bundle | Executa o liferay-npm-bundler para preparar o pacote Liferay. | | npm run deploy | Compila, pacotiza e faz o deploy no diretório configurado. |

🧪 Stack Tecnológica

• React 18
• Axios (Comunicação API)
• TanStack Query v4 (Gerenciamento de Estado)
• Zod (Validação de Schema)
• Babel & Liferay NPM Bundler

📝 Licença

Este projeto está sob a licença MIT.

Liferay © 2024