🚀 Publicando Aplicações React no HCL Digital Experience com DX Client e Azure DevOps

A publicação de aplicações modernas em React no HCL Digital Experience (DX) pode parecer complexa à primeira vista — mas com a abordagem certa, pode se tornar um processo totalmente automatizado, seguro e rastreável.

A Ideale Tech desenvolveu um pipeline completo, integrando DX Client, scripts customizados e CI/CD com Azure DevOps, garantindo compatibilidade total com o Script Application do HCL DX.

🎯 O que você vai encontrar neste guia

• Como configurar um projeto React para o HCL DX;

• Como aplicar os ajustes de compatibilidade com o Script Application;

• Como automatizar tudo com Azure DevOps.
  

⚙️ 1. Setup completo: do zero até o deploy

Pré-requisitos:

• HCL Digital Experience (v9.5+)

• Node.js (v18+)

• DX Client instalado (guia oficial)

• Azure DevOps (ou outro sistema CI/CD)

Passo a passo:

1. Clone ou crie seu projeto React

npx create-react-app minha-app cd minha-app

2. Instale as dependências

npm install --legacy-peer-deps npx -p npm@6 npm audit fix

3. Configure os scripts no package.json

"scripts": { 
"buildToDx": "react-scripts build && node postbuild.js", 				  "buildToLocalDx": "react-scripts build && node postbuild_local.js", 	"dxdeploy": "dxclient deploy-scriptapplication push --dxProtocol http --hostname localhost --dxPort 10039 --dxUsername <usuario> --dxPassword <senha> --contenthandlerPath /wps/mycontenthandler --mainHtmlFile index.html --wcmSiteArea \"<biblioteca/area>\" --wcmContentName minhaApp --wcmContentTitle \"Minha App React\" --contentRoot /store/build" 
}

4. Execute os comandos conforme o ambiente:

• npm run start → Executa localmente

• npm run buildToDx → Compila e ajusta para produção

• npm run buildToLocalDx → Ajusta para uso com container local

• npm run dxdeploy → Publica no HCL DX via CLI

5. No HCL DX:

• Crie uma nova página

• Selecione o tema Deferred with React

• Adicione o Script Application gerado

• Publique a página

🛠️ 2. Scripts exclusivos da Ideale Tech

A Ideale desenvolveu dois scripts para garantir a compatibilidade total com o HCL DX:

🔧 postbuild.js

Corrige caminhos de arquivos e ajusta o index.html para funcionamento como Script Application:

t.p = "/" → t.p = ""

🧪 postbuild_local.js

Além dos ajustes, move os arquivos para /store/build, facilitando testes em ambientes Docker locais do HCL DX.

🔁 3. Azure DevOps: CI/CD completo com deploy automatizado

Abaixo, um exemplo de pipeline utilizado pela Ideale Tech:

trigger: branches: include: - main pool: vmImage: 'ubuntu-latest' steps: - task: NodeTool@0 inputs: versionSpec: '18.x' - script: | npm install --legacy-peer-deps npm run buildToDx   displayName: 'Build and patch React app' - script: | npm install -g dxclient dxclient deploy-scriptapplication push ...   displayName: 'Deploy to HCL DX'

Com esse pipeline, todo o processo — build, compatibilidade e deploy — ocorre automaticamente após o push no Git.

✅ Benefícios da abordagem Ideale

• 🚀 Agilidade: deploy em minutos;

• 🔒 Segurança: sem dependência de ações manuais;

• 🧩 Compatibilidade garantida: com todos os requisitos do HCL DX;

• 📈 Escalabilidade: fácil adaptação para múltiplos ambientes.

🤝 A Ideale Tech entrega isso na prática

Com presença no Brasil e na Europa, ajudamos empresas a modernizar portais legados, padronizar aplicações front-end e implantar esteiras de CI/CD em ambientes complexos — com tecnologia, metodologia e governança.

Quer publicar suas aplicações com mais segurança e velocidade no HCL DX?

Entre em contato com o time da Ideale Tech — nós cuidamos de tudo, do setup à entrega contínua.