SFCC Programming Setup and Troubleshooting


INTRODUCTION: SFCC is started as Demandware in 2004. SFCC is a cloud-based unified e-commerce platform with capabilities in Mobile, AI personalization, Order management, B2B and, B2C services. It as well provides easy to use customizable e-commerce websites. SFCC was founded to provide a hosted services that would enable companies to develop and manage easy to use customizable websites rather than building sites from scratch.

SFCC STOREFRONT: We can create a blank site using SFCC’s backend called the Business Manager. We need to disable page caching so that we can immediately view in the front end whatever code changes we have done.

SFCC Base: SiteGenesis is a full-featured demonstration e-commerce site to explore B2C commerce and its capabilities. SFCC base is storefront reference architecture core which includes base functionality. You can use it as the basis of your custom site. For developers, it provides sample code -pipelines scripts and ISML templates. For merchants, it offers sample configurations for catalogues, categories and products, and so on.

Importing SITEGENESIS: We can import the SFCC’s base e-commerce website called the SiteGenesis.Site genesis is a good way for creating an e-commerce website. After importing SiteGenesis we can preview the storefront.

Programming setup:

  1. Git Repository clone: Get the base code from the Git repository using the git bash command-line interface, Command: git clone code_url
  2. Visual Studio code setup:
    1. Install Visual studio.
    2. Open Visual Studio Code and open the code from the cloned git repository.
    3. Create your Git branch and do the code changes.
  3. npm installation and commands: Software requirement: node version should be 12.13.0 and npm version should be 6.12.0
    1. For npm, installation run the command npm i
    2. If the output of the above command suggests then run npm audit fix and npm audit fix –force
    3. Run npm run build which generates .map files
    4. After success then run the command npm run start
  4. Code Version: A code version is a folder that contains custom cartridges. An instance uses the currently active code version. Select the code version using Business manager.
  5. Create Connection with sandbox: Create the dw.json file and add the sandbox details as follow: dw.json {” hostname”: “bhds-006.sandbox.abc.dx.commer.salesforce.com”, “username”: “abc”, “password”:”1234″, “code version”:”mp”}
  6. Cartridges: Cartridge is like structured folders and subfolders where code is stored and is organized in a manner that is optimized to work well with SFCC. Sample – Cartridges app_custom_cartridge->cartridge->client->default
    1. refresh and upload the cartridges to Sandbox
  7. Sandbox and Storefront: Login to sandbox and choose the code version you want to run and select the site and click on the storefront to see the website.
  8. Challenges:
    1. Most of the time we get npm error, for that, the following can be the reasons
      1. dw.json might be wrong
      2. .js file is wrong
      3. Cartridges folder and file structure might be wrong
      4. .scss file may be wrong
      5. A version of npm might be different Solution: For this check all the above-mentioned files and cartridges folder structure. Also, check the npm version.

CONCLUSION: SFCC Programmer should follow the above steps. Practising these steps makes programming configuration in VS code easy.

About the author

Pallavi Walhekar
By Pallavi Walhekar