SAP Spartacus - Getting started

Installing [ HYBRIS 2205 ] with Spartacus #

• Install the JDK 17 : https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html

• Download SAP Hybris Suite 2205 from URL - get from here and alternative way to download click here

• Create a folder with Hybris2205SPA name and extract the ZIP under this folder.

• Download spartacussampledata.2105.zip - get sample data from here

• Now let’s create the folder one by one, first we need to create the folder with name custom inside hybris/bin.

C:\Hybris2205SPA\hybris\bin\custom

• And now create another folder inside hybris/bin/custom folder with name spartacussampledata.

C:\Hybris2205SPA\hybris\bin\custom\spartacussampledata

• Extract the spartacussampledata.2105.zip which you have downloaded inside the spartacussampledata folder.

• Move the custom properties file from C:\Hybris2205SPA\hybris\bin\custom\spartacussampledata\resources\installer to C:\Hybris2205SPA\installer\customconfig.

• Now let’s download the recipes from this URL - get the recipe from here

• Go to C:\Hybris2205SPA\installer\recipes folder and extract the downloaded recipe and paste inside this.

• Open CMD inside C:\Hybris2205SPA\installer folder and run the command : install.bat -r cx-for-spa

• Initialize the system using the following command: install.bat -r cx-for-spa initialize

• Open CMD inside C:\Hybris2205SPA\hybris\bin\platform and start your server using this command : hybrisserver.bat

• Install Node JS : https://nodejs.org/ja/blog/release/v14.20.0/ and choose the version according to your system : [ node-v14.20.0-x64.msi ]

• Create a folder under hybris/bin/custom folder with name as spartacusstore

C:\Hybris2205SPA\hybris\bin\custom\spartacusstore

• Open CMD inside hybris/bin/custom/spartacusstore folder and execute below command:

npm install --global yarn

yarn install

# Uninstall previous version by running commands

npm uninstall -g @angular/cli
npm cache clean --force

# lets install angular version 12

npm install -g @angular/cli@12

# Create new angular app by running

ng new mystore --style=scss

# Now go inside your app and remove the html from [ src\app\app.component.html ] and save
# After saving run below command to link it with the hybris using schematics

ng add @spartacus/schematics --ssr --pwa --base-url https://localhost:9002/ --base-site apparel-uk-spa --interactive=false

• Let’s start our server by using yarn start --ssl command.

• Navigate to C:\Windows\System32\drivers\etc\hosts open hosts file and add the below properties and make it save.

127.0.0.1   localhost
127.0.0.1   electronics.local
127.0.0.1   apparel-uk.local
127.0.0.1   apparel-de.local
127.0.0.1   powertools.local

• Allow invalid certificates for resources loaded from localhost by going to the chrome://flags/#allow-insecure-localhost and enable it.

• Open Hac by going to this URL : https://localhost:9002/hac and look for console tab, hover on console tab and click on ImpEx Import. Now import below impex

INSERT_UPDATE OAuthClientDetails;clientId[unique=true]    ;resourceIds       ;scope        ;authorizedGrantTypes                                            ;authorities             ;clientSecret    ;registeredRedirectUri
                                        ;client-side              ;hybris            ;basic        ;implicit,client_credentials                                     ;ROLE_CLIENT             ;secret          ;http://localhost:9001/authorizationserver/oauth2_implicit_callback;
                                        ;mobile_android           ;hybris            ;basic        ;authorization_code,refresh_token,password,client_credentials    ;ROLE_CLIENT             ;secret          ;http://localhost:9001/authorizationserver/oauth2_callback;

INSERT_UPDATE CorsConfigurationProperty;key[unique=true];value;context[default=commercewebservices,unique=true]
        ;allowedOrigins;http://localhost:4200 https://localhost:4200
        ;allowedOriginPatterns;*
        ;allowedMethods;GET HEAD OPTIONS PATCH PUT POST DELETE
        ;allowedHeaders;origin content-type accept authorization cache-control x-anonymous-consents x-profile-tag-debug x-consent-reference occ-personalization-id occ-personalization-time
        ;allowCredentials;true
        ;exposedHeaders;x-anonymous-consents occ-personalization-id occ-personalization-time

• All links required

HAC : https://localhost:9002/hac/
Backoffice : https://localhost:9002/backoffice/login.zul
SmartEdit : https://localhost:9002/smartedit/

<!--- Hybris storefront URL : -->

Apprel UK Site : https://apparel-uk.local:9002/yacceleratorstorefront/en/
Electronic Site : https://electronics.local:9002/yacceleratorstorefront/electronics/en/
Powertools Site : https://powertools.local:9002/yb2bacceleratorstorefront/powertools/en/USD/

<!--- Spartacus storefront URL : -->

Spartacus storefront : https://localhost:4200

• Let’s see the final output of all the above steps :

Bonus tips if you face issues: #

To use multiple java versions in machine

# IF you want to use multiple java versions in your machine use below command,
# and update the java path by replacing the path for JAVA_HOME and run these,
# one by one in CMD or powershell

set JAVA_HOME=C:\Program Files\Java\jdk-17.0.5
set PATH=%JAVA_HOME%\bin;%PATH%

Steps to fix spartacus storefront: #

If you are unable to see the spartacus storefront goto your backoffice https://localhost:9002/backoffice/login.zul and on left side search for base and select base store as shown in below image.

Now select your storefront in my case i’m accessing the apparel-uk store as shown below and double click on it to open.

After opening the site change the default currency form Pound [GBP] to US Dollar [USD] and save them. After saving try to open the localhost - https://localhost:4200 you will be able to see the page now.

Steps to fix bad cred issue smartEdit: #

If you are unable to login into smartedit - https://localhost:9002/smartedit/ goto your https://localhost:9002/backoffice/login.zul and on left side search for employee and click on it as shown below.

After opening it search for admin as shown and click on it you will see the details inside it.

Now goto password tab as shown below and add new password and change the disable login option to False if it isn’t false already and save all the changes.

Now we need to import an Impex so open HAC - https://localhost:9002/hac and import the below impex

INSERT_UPDATE OAuthClientDetails;clientId[unique=true];resourceIds;scope[mode=append];authorizedGrantTypes;accessTokenValiditySeconds
 ;smartedit;hybris;basic,permissionswebservices,previewwebservices;password;3600

Now try to login with id = admin and updated password