Creating responsive web apps with bootstrap framework alongside Hybris storefront

| Last Updated December 21, 2021 - by bhupendra sharma under application engineering

I was going through the Hybris 6.3 version and trying to understand the new feature and suddenly it struck me, why Hybris is not using the bootstrap framework for UI which is much easier to implement. So, I started exploring how the Hybris storefront can use bootstrap without any issue since bootstrap is just Javascript and CSS. When we have an existing storefront up and running, I figured out building a parallel web application to the storefront and implementing bootstrap in that would be a workable solution.

Below are the steps I followed to create a new web application alongside existing storefront with bootstrap UI using Hybris security and the same login feature used for all cockpits and HMC. Please note that I did this on Hybris 6.3 version and you may have different configuration settings for earlier versions.

Step 1: Create the “yempty” extension

The yempty extension is basically an empty extension with minimal implementations of the following extension modules[1]: For our current example, we are going to use only the “web” Module only.

core
hmc
web

Steps:

Open a command prompt
Navigate to the <HYBRIS_BIN_DIR> /platform directory
Run the <HYBRIS_BIN_DIR> /platform/setantenv.bat or . ./setantenv.sh file. Don’t close the command prompt as the settings are transient and are lost if the command prompt is closed
Run “ant extgen” in <HYBRIS_BIN_DIR>/platform directory. This internally runs ant in the Extgen directory
Extgen prompts you to specify values for the technical aspects of an extension. Extgen comes with default values for all these technical aspects. These default values are defined in the project.properties file in the extgen directory. The default value is displayed in brackets ([ and ]), such as:
Press [Enter] to use the default value [training]
You can simply use the default value by pressing Enter

Provide the values as prompted by Extgen

The extension’s name
The extension’s Java package
The extension template to use

Upon precisely giving the values, Extgen:

Copies the extension template to a temporary directory
Modifies the extension template to reflect the specified values
Copies the new extension from the temporary directory to the directory specified by the extgen.extension.path property in the project.properties file

After the copy process is completed, the extension is ready to be referenced in the localextensions.xml.

Step 2: Add the js and css for bootstrap

Download latest bootstrap js and css http://getbootstrap.com/getting-started/#download
Copy the js and css to static folder as shown below

Step 3: update the “training-spring-security-config.xml”

Please copy paste the below piece of code or if you already have then update accordingly

Click to Copy

<?xml version=”1.0″ encoding=”UTF-8″?>
<!–
[y] hybris PlatformCopyright (c) 2017 SAP SE or an SAP affiliate company. All rights reserved.This software is the confidential and proprietary information of SAP
(“Confidential Information”). You shall not disclose such Confidential
Information and shall use it only in accordance with the terms of the
license agreement you entered into with SAP.
–>
<beans xmlns=”http://www.springframework.org/schema/beans”
xmlns:security=”http://www.springframework.org/schema/security”
xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xmlns:aop=”http://www.springframework.org/schema/aop”
xmlns:util=”http://www.springframework.org/schema/util”
xsi:schemaLocation=”http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/security
http://www.springframework.org/schema/security/spring-security.xsd
http://www.springframework.org/schema/util
http://www.springframework.org/schema/util/spring-util.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd”
default-autowire=”byName”><security:http pattern=”/error.jsp” security=”none” />
<security:http pattern=”/404.jsp” security=”none” />
<security:http pattern=”/static/” security=”none” /><security:http use-expressions=”false” disable-url-rewriting=”false”>
<security:session-management session-authentication-strategy-ref=”fixation” />
<security:anonymous key=”anonymous” username=”anonymousUser” granted-authority=”ROLE_ANONYMOUS” />
<security:intercept-url pattern=”/j_spring_security_check” access=”IS_AUTHENTICATED_ANONYMOUSLY” requires-channel=”https” />
<security:intercept-url pattern=”/login.jsp” access=”IS_AUTHENTICATED_ANONYMOUSLY” requires-channel=”https” />
<security:intercept-url pattern=”/com” access=”IS_AUTHENTICATED_REMEMBERED” requires-channel=”https” />
<security:remember-me services-ref=”rememberMeServices” key=”adminweb”/>
<security:logout logout-success-url=”/login.jsp” logout-url=”/j_spring_security_logout”/>
<security:form-login
always-use-default-target=”false”
login-page=”/login.jsp”
username-parameter=”j_username”
password-parameter=”j_password”
login-processing-url=”/j_spring_security_check”
authentication-failure-url=”/login.jsp?login_error=1″
authentication-success-handler-ref=”authenticationSuccessHandler”/> — > Please provide you authentication success Handler here
<security:port-mappings><security:port-mapping http=”#{configurationService.configuration.getProperty(‘tomcat.http.port’)}”
https=”#{configurationService.configuration.getProperty(‘tomcat.ssl.port’)}”/>
<security:port-mapping http=”80″ https=”443″/>
</security:port-mappings>
<security:access-denied-handler error-page=”/login.jsp”/>
<security:csrf disabled=”true”/>
<security:headers disabled=”true”>
<security:frame-options disabled=”true”/>
</security:headers>
</security:http><bean id=”authenticationSuccessHandler”
class=”class reference authentication success Handler here” />

<security:authentication-manager alias=”rememberMeAuthenticationManager”>
<security:authentication-provider ref=”coreAuthenticationProvider” />
</security:authentication-manager>

<!– Below piece of code define to whom you allow to login , below say only Employee–>
<alias name=”defaultCorePreAuthenticationChecks” alias=”corePreAuthenticationChecks”/>
<bean id=”defaultCorePreAuthenticationChecks” class=”de.hybris.platform.spring.security.RejectUserPreAuthenticationChecks”>
<property name=”allowedUserGroups”>
<list>
<value>Admingroup</value>
<value>Employeegroup</value>
</list>
</property>
<property name=”allowedUserTypes”>
<list>
<value>Employee</value>
</list>
</property>
</bean>

</beans>

Step 4: update the web.xml

Step 5: Clean, compile and start the server

ant clean all
./hybrisserver.sh or hybrisserver.bat to start the server

Now use https://localhost:9002/<extensionname> to get the login page