Use Ant Customize command in Hybris

1. Overview

In Hybris, there are two types of files and directories :

• Custom files : The source code that we write, change and commit (eg. custom extensions).
• Read only files : The binary files that we can’t/shouldn’t change (eg. platform).

However, you may need to replace some read only binary files, eg. customize HMc css style.

To do so, you have to :

1. Copy the original file that you want to customize inside the ${HYBRIS_CONFIG_DIR}/customize directory.
2. Update and customize the file.
3. Run ant customize.

In this article, I will show you how to use ant customize command.

2. Ant customize in action

For example, to customize the CSS style of the HMc, you need to replace the hmc.css file located in the ${HYBRIS_BIN_DIR}/ext-platform-optional/hmc/web/webroot/css directory.

2.1. Copy original file

Copy the hmc.css file inside inside the ${HYBRIS_CONFIG_DIR}/customize.

You have to keep the same folder structure, which mean  ${HYBRIS_CONFIG_DIR}/customize/ext-platform-optional/hmc/web/webroot/css/hmc.css.

2.2. Update/Customize file

For this example, I will change the HMc header color.

/*** ... ***/

.page-header {
   height: 71px;
   background-color: red;
   color: #ffffff;
   vertical-align:top;
   text-align:left;
   white-space:nowrap;
   color: #ffffff;
   font-size: 10px;
}

/*** ... ***/

Update only the block you want to customize and keep the rest of the file.

2.3. Run ant customize

The ant customize command, will replace the customized files with original ones.

Start the Hybris server (run ant all if it’s needed) and see your changes.

Mouad EL Fakir

Software Craftsmanship, Stackextend author and Full Stack developer with 6+ years of experience in Java/Kotlin, Java EE, Angular and Hybris…
I’m Passionate about Microservice architectures, Hexagonal architecture, Event Driven architecture, Event Sourcing and Domain Driven design (DDD)…
Huge fan of Clean Code school, SOLID, GRASP principles, Design Patterns, TDD and BDD.