Introduction
If you’re new to Salesforce Commerce Cloud (SFCC) development, one of the first things you’ll encounter is the Storefront Reference Architecture — SFRA. Understanding how SFRA organises code is foundational to everything else. This guide walks through the key directories in the base cartridge and explains what lives where.
What Is SFRA?
SFRA is the organisational framework that underpins SFCC development. It provides a systematic arrangement for code with a clear separation of concerns, making it easier to navigate large codebases, collaborate across teams, and build complex storefronts that scale.
At the heart of SFRA is the concept of cartridges — self-contained modules that encapsulate specific functionalities and serve as building blocks for your storefront. The base cartridge, supplied by Salesforce, provides the foundation and essential structure for starting new projects.
Key Directories
Controllers
Controllers handle logic and process user requests. When a customer visits a product page or submits a form, a controller is what responds to that action, coordinates the necessary business logic, and returns the appropriate response.
Templates
Templates define the visual presentation of the storefront — page structure, component layout, and how data is rendered into HTML. They work closely with controllers to turn data into what customers actually see.
Scripts
The Scripts folder stores reusable JavaScript files that support controllers. Rather than embedding complex logic directly inside controllers, helper scripts and service integrations live here, keeping controllers clean and focused.
Forms
The Forms directory establishes the structure and validation rules for storefront forms — checkout, registration, address entry, and so on. SFRA uses form definition files to declaratively describe fields, their types, and their validation requirements.
Static Content
Static Content houses images, CSS files, and client-side JavaScript that are served directly to the browser. Keeping these separate from server-side logic maintains a clear boundary between what the server processes and what the browser receives.
Why This Structure Matters
Following SFRA’s organisational conventions lets you efficiently navigate codebases on any SFCC project, not just your own. It facilitates collaboration across teams, promotes code reuse between projects, and gives you a reliable starting point for building customisable, scalable storefronts.
Understanding the folder structure is the first step. In the next part of this series, we’ll go deeper into Controllers and how to extend and customise them without modifying the core platform code.