Building SFRA

Previous Step: Installing and Configuring SFRA Build Tools

This topic describes how to build Storefront Reference Architecture (SFRA) and upload code to your Sandbox instance. If a cartridge has style sheets or JavaScript, compile it before uploading.

Building a Cartridge

To compile the style sheets and JavaScript for a cartridge:

  1. Open a command-line terminal.
  2. Navigate to the top-level folder of the repository containing the cartridges directory, such as storefront-reference-architecture.
  3. To compile both CSS and JavaScript, enter:
    npm run compile:js && npm run compile:scss && npm run compile:fonts
    To compile only CSS:
    npm run compile:scss
    To compile only JavaScript:
    npm run compile:js
    Note: Usually, you only have to compile fonts once.

See also Customizing Storefront Reference Architecture (SFRA)

Build Commands

The build commands are defined in the scripts section of the package.json for your top-level folder. You can change the commands and add commands for other command-line tools in the package.json file.

If you have installed the sgmf-scripts node globally, use this command to see all current build commands:
sgmf-scripts --help
If you have installed the sgmf-scripts node locally, use this command to see all current build commands:
node node_modules/sgmf-scripts --help
You can customize the build commands or add new ones in your package.json. See npm documentation for more information about adding scripts for npm.

Building the JSDoc

To build an HTML version of the JSDoc:

  1. Clone or download the sfra-jsdoc repository from GitHub.
  2. Read the ReadMe for the most up-to-date instructions on how to configure and run the repository.

Next Step: Uploading Code for SFRA