Setting Up Visual Studio Code (VS Code) for SFRA Development in Salesforce Commerce Cloud (SFCC)

Salesforce Commerce Cloud (SFCC) is a robust eCommerce platform supporting multiple storefront architectures — including Pipelines, Controllers, and the modern Storefront Reference Architecture (SFRA). This guide provides a step-by-step setup process for configuring Visual Studio Code (VS Code) for efficient SFRA cartridge development, deployment, and debugging.

1. Why Use VS Code for SFRA Development

Visual Studio Code (VS Code) is a lightweight, extensible, and high-performance editor that offers powerful tools for SFCC development. It provides fast cartridge uploads, smart IntelliSense for JavaScript, ISML, and SCSS, Prophet Debugger integration, built-in Git support, and works seamlessly across Windows, macOS, and Linux.

2. Install Visual Studio Code

• Download VS Code from the official website: https://code.visualstudio.com/
• Install it for your operating system (Windows, macOS, or Linux).
• Launch VS Code and confirm it’s running successfully.

3. Install the Prophet Debugger Extension

The Prophet Debugger is essential for connecting VS Code directly to your SFCC sandbox — enabling cartridge upload, synchronization, and live debugging.

• Installation via VS Code Marketplace:

• Open VS Code.
• Go to Extensions (Ctrl + Shift + X / Cmd + Shift + X on macOS).
• Search for 'Prophet Debugger'.
• Click Install.

• Alternative Installation via Web Marketplace:

• Visit the Prophet Debugger Marketplace page: https://marketplace.visualstudio.com/
• Click Install and confirm to open in VS Code.

4. Set Up Your SFRA Project

If you don’t already have an SFRA project, clone Salesforce’s official Storefront Reference Architecture (SFRA) repository using the command:

• git clone
  https://github.com/SalesforceCommerceCloud/storefront-reference-architecture.git

This will create a folder structure with cartridges such as app_storefront_base, bm_app_storefront_base, and modules.

5. Configure the Sandbox Connection (dw.json)

Create a dw.json file in your project root to define your sandbox credentials and cartridge setup. Example:

•          
  {
    "hostname": "your-sandbox-instance.demandware.net",
    "username": "your.username",
    "password": "your-password",
    "code-version": "version1",
    "cartridges": ["app_storefront_base", "bm_app_storefront_base"]
  }
           
        

  Note: Never share your dw.json file publicly—it contains sensitive sandbox credentials.

  

6. Configure VS Code Settings for SFCC

Inside your project directory, create a .vscode folder containing the following configuration files:

• File: .vscode/launch.json

•          
  {
    "version": "0.1.0",
    "configurations": [
      { "type": "prophet", "request": "launch", "name": "SFCC" }
    ]
  }
           
        

  

• File: .vscode/settings.json

•          
  {
    "terminal.integrated.env.osx": {"SFDX_SET_CLIENT_IDS": "sfdx-vscode"},
    "terminal.integrated.env.linux": {"SFDX_SET_CLIENT_IDS": "sfdx-vscode"},
    "terminal.integrated.env.windows": {"SFDX_SET_CLIENT_IDS": "sfdx-vscode"}
  }
           
        

  

7. Upload Cartridges to Your Sandbox

• Open Command Palette:
  - Windows/Linux: Ctrl + Shift + P
  - macOS: Cmd + Shift + P
• Type and select 'Prophet: Enable Upload'.
• Once connected, Prophet Debugger will automatically upload your cartridges to the configured code version.
  

  

8. Verify Your SFRA Setup

After deployment:

• Log into Business Manager (BM).
• Navigate to Administration → Site Development → Code Deployment.
• Confirm that your code version and cartridges are visible.
• Open your storefront URL and verify everything loads correctly.

  

9. Wrapping Up

You’ve successfully configured VS Code for SFRA development on Salesforce Commerce Cloud.

Your setup now includes Prophet Debugger integration, sandbox connection via dw.json, cartridge upload automation, and a debug-ready VS Code environment.

10. Additional Resources

- Salesforce B2C Commerce Cloud Documentation:

https://developer.salesforce.com/docs/commerce

- Storefront Reference Architecture (GitHub):

https://github.com/SalesforceCommerceCloud/storefront-reference-architecture

- Prophet Debugger on VS Marketplace:

https://marketplace.visualstudio.com/items?itemName=SalesforceCommerceCloud.propht

Have any questions? Feel free to drop an email to support@astreait.com or visit astreait.com to schedule a consultation.