SAP Spartacus - Getting started

3 min read

Installing [ HYBRIS 2205 ] with Spartacus

  • And now create another folder inside hybris/bin/custom folder with name spartacussampledata.
  • Extract the 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 : 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

  • 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.   localhost   electronics.local   apparel-uk.local   apparel-de.local   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
        ;allowedHeaders;origin content-type accept authorization cache-control x-anonymous-consents x-profile-tag-debug x-consent-reference occ-personalization-id occ-personalization-time
        ;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 :

Spartacus storefront

Apprel UK HYBRIS storefront

Electronic HYBRIS storefront

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

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.

base site in backoffice

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

select base site in backoffice

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.

update the currency in backoffice

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.

smartedit issue

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

admin tab

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.

password reset

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

Now try to login with id = admin and updated password

Thanks for reading !!! 😊
Share this post :

JavaScript - Cheat sheet

SAP Spartacus - Overriding components using Outlets