Skip to content

Latest commit

 

History

History
128 lines (82 loc) · 6.6 KB

README.md

File metadata and controls

128 lines (82 loc) · 6.6 KB

Storefront Reference Architecture (SFRA)

This is a repository for the Storefront Reference Architecture reference application.

Storefront Reference Architecture has a base cartridge (app_storefront_base) provided by Commerce Cloud that is never directly customized or edited. Instead, customization cartridges are layered on top of the base cartridge. This change is intended to allow for easier adoption of new features and bug fixes. Storefront Reference Architecture supplies an plugin_applepay plugin cartridge to demonstrate how to layer customizations for the reference application.

Your feedback on the ease-of-use and limitations of this new architecture is invaluable during the developer preview. Particularly, feedback on any issues you encounter or workarounds you develop for efficiently customizing the base cartridge without editing it directly.

The latest version

The latest version of SFRA is 7.0.0

Getting Started

  1. Clone this repository.

  2. Run npm install to install all of the local dependencies (SFRA has been tested with Node v18.19 and is recommended)

  3. Run npm run compile:js from the command line that would compile all client-side JS files. Run npm run compile:scss and npm run compile:fonts that would do the same for css and fonts.

  4. Create dw.json file in the root of the project. Providing a WebDAV access key from BM in the password field is optional, as you will be prompted if it is not provided.

{
    "hostname": "your-sandbox-hostname.demandware.net",
    "username": "AM username like [email protected]",
    "password": "your_webdav_access_key",
    "code-version": "version_to_upload_to"
}

  1. Run npm run uploadCartridge. It will upload app_storefront_base, modules and bm_app_storefront_base cartridges to the sandbox you specified in dw.json file.

  2. Use https://github.com/SalesforceCommerceCloud/storefrontdata to zip and import site data on your sandbox.

  3. Add the app_storefront_base cartridge to your cartridge path in Administration > Sites > Manage Sites > RefArch - Settings (Note: This should already be populated by the sample data in Step 6).

  4. You should now be ready to navigate to and use your site.

NPM scripts

Use the provided NPM scripts to compile and upload changes to your Sandbox.

Compiling your application

  • npm run compile:scss - Compiles all .scss files into CSS.
  • npm run compile:js - Compiles all .js files and aggregates them.
  • npm run compile:fonts - Copies all needed font files. Usually, this only has to be run once.

If you are having an issue compiling scss files, try running 'npm rebuild node-sass' from within your local repo.

Linting your code

npm run lint - Execute linting for all JavaScript and SCSS files in the project. You should run this command before committing your code.

Watching for changes and uploading

npm run watch - Watches everything and recompiles (if necessary) and uploads to the sandbox. Requires a valid dw.json file at the root that is configured for the sandbox to upload.

Uploading

npm run uploadCartridge - Will upload app_storefront_base, modules and bm_app_storefront_base to the server. Requires a valid dw.json file at the root that is configured for the sandbox to upload.

npm run upload <filepath> - Will upload a given file to the server. Requires a valid dw.json file.

Testing

Running unit tests

You can run npm test to execute all unit tests in the project. Run npm run cover to get coverage information. Coverage will be available in coverage folder under root directory.

  • UNIT test code coverage:
  1. Open a terminal and navigate to the root directory of the mfsg repository.
  2. Enter the command: npm run cover.
  3. Examine the report that is generated. For example: Writing coverage reports at [/Users/yourusername/SCC/sfra/coverage]
  4. Navigate to this directory on your local machine, open up the index.html file. This file contains a detailed report.

Running integration tests

Integration tests are located in the storefront-reference-architecture/test/integration directory.

To run integration tests you can use the following command:

npm run test:integration

Note: Please note that short form of this command will try to locate URL of your sandbox by reading dw.json file in the root directory of your project. If you don't have dw.json file, integration tests will fail. sample dw.json file (this file needs to be in the root of your project) { "hostname": "devxx-sitegenesis-dw.demandware.net" }

You can also supply URL of the sandbox on the command line:

npm run test:integration -- --baseUrl devxx-sitegenesis-dw.demandware.net

Running acceptance tests

Prerequisite: The Java Runtime Environment (JRE 8+) is required to run Selenium and the acceptance tests. If you have not done so, install Java on your machine.

Acceptance tests are located in the storefront-reference-architecture/test/acceptance directory.

The acceptance tests will run against the site specified in the hostname property of dw.json. ie. To run the tests on abcd-123.dx.commercecloud.salesforce.com, in your dw.json set the following:

"hostname": "abcd-123.dx.commercecloud.salesforce.com"

There are several NPM scripts available for running the acceptance tests. They all require a --profile parameter for setting the browser the tests will run against. ie. npm run test:acceptance:smoke --profile chrome

Tests will generally run on Chrome, Safari, and Firefox.

To run the tests in headless mode, set a HEADLESS environment to true before starting the npm run. ie. HEADLESS=true && npm run test:acceptance:smoke --profile chrome

  • test:acceptance:custom - runs all tests (Note: some tests will fail as the browser size defaults to desktop)
  • test:acceptance:deep - runs all storefront tests
  • test:acceptance:smoke - runs happy path tests
  • test:acceptance:pagedesigner - runs page designer tests
  • test:acceptance:desktop - runs storefront desktop tests
  • test:acceptance:mobile - runs storefront mobile tests
  • test:acceptance:tablet - runs storefront tablet tests

Note: Selenium can be finicky to start. If the tests fail to start, simply rerun the command again until the tests start.

Contributing to SFRA

Page Designer Components for Storefront Reference Architecture

See: Page Designer Components