Set Up a Page Designer Development Environment

Learning Objectives

After completing this unit, you’ll be able to:

• Identify three steps to configure your development environment.
  
• Explain why compatibility mode is important.
  
• List the local machine dependencies for Page Designer development.
  
• Describe the basic steps to import sample data.
  

Prepare Your Development Environment

You’re ready to set up your development environment and start building Page Designer page and component types. You can develop and manage your storefront by using git and your IDE on your local machine. Additionally, you use a browser to access GitHub and the B2C Commerce Business Manager tool for configuration and management.

Here’s your setup checklist.

1. Check the compatibility mode in Business Manager.
   
2. Verify the dependencies on your local machine.
   
3. Download or clone the SFRA repository from GitHub.
   
4. Install the cartridges locally.
   
5. Upload the cartridges to the server.
   
6. Configure the cartridge path in Business Manager.
   
7. Import the storefront content data into the server with Business Manager.
   
8. Review the pages and components in Page Designer.
   
9. Customize or create files.
   

This unit assumes you’re a B2C Commerce developer with the appropriate permissions. If you don’t have those permissions, read along to understand how the process works in a sandbox instance. B2C Commerce isn’t available in the Trailhead Playground, so don’t attempt these steps there.

If you have a sandbox, try these steps there. If you don’t have a sandbox and you’re a customer or partner developer, ask your manager about getting access.

Page Designer is automatically available for each instance type.

Check the Compatibility Mode

Compatibility mode refers to a specific B2C Commerce API version where changes broke backward compatibility with the previous API version. Not every API version introduces breaking changes, so only some API versions have a compatibility mode. API versioning gives you the ability to select from multiple compatibility modes with full knowledge and acceptance of breaking changes. For Page Designer to work without side effects from Page Designer component usage, set your compatibility mode to 17.7 or later.

Here’s how you can check your site’s compatibility mode.

1. In Business Manager, select the App Launcher.
   
2. Select Administration | Site Development | Code Deployment.
   
3. Confirm that the compatibility mode is 17.7 or later.
   

To learn more, see Compatibility Mode Changes.

Check Dependencies

Confirm that your local machine supports these front-end package dependencies, which live in the SFRA package.json.

{
  "dependencies": {
    "bootstrap": "4.0.0",
    "cleave.js": "^1.0.2",
    "flag-icon-css": "^2.3.0",
    "font-awesome": "^4.6.3",
    "jquery": "^3.1.1",
    "popper.js": "^1.14.0"
  }
}

Verify your Node.js and npm installations.

1. Open a command prompt.
   
2. Run these commands to check your installed versions.
   
   • node -v
   • npm -v
3. Confirm that you have Node.js 12.x or later.
   

Download Node.js from https://nodejs.org. npm comes bundled with Node.js.

Download SFRA from GitHub

The SFRA repository on GitHub includes Page Designer examples with prebuilt page types and component types. The latest version of SFRA is in the SFRA repository. To learn how to access the SFRA repository, see Salesforce Commerce Cloud GitHub Repositories and Access.

Install Page Designer Cartridges

After you clone the repository, install the dependencies and compile your assets.

1. In the command prompt, go to the top level of the repository: for example, storefront-reference-architecture.
   
2. Run: npm install. npm installs the packages that each repository depends on.
   
3. Compile JavaScript and style sheets.
   
4. Go to the top level of the repository.
   
   • Run: npm run compile:js
   • Run: npm run compile:scss
   • Run: npm run compile:fonts

Upload Cartridges

To upload the SFRA cartridges, create a dw.json file with your sandbox connection details. Place this file at the top level of the storefront-reference-architecture repository, as a sibling of the cartridges directory. Use valid JSON with these four fields:

{
  "hostname": "dev01-web-yourcompany.demandware.net",
  "username": "admin",
  "password": "your-webdav-access-key",
  "code-version": "version1"
}

Here’s what each field means.

1. For hostname, enter the fully qualified domain name (FQDN) of your sandbox: for example, dev04-web-yourcompany.demandware.net.
   
2. For username, enter a user with Site Development permissions. For example, admin.
   
3. For password, enter the WebDAV access key for that user.
   
4. For code-version, enter version1 for a new sandbox.
   

To upload the cartridges:

1. Go to the top level of the storefront-reference-architecture repository.
   
2. Run: npm run uploadCartridge. This uploads app_storefront_base and modules to the sandbox specified in your dw.json file.
   
3. In Business Manager, select the App Launcher.
   
4. Select Administration | Site Development | Code Deployment.
   
5. Select the code version that you specified in dw.json (for example, version1). The app_storefront_base and modules cartridges appear in the cartridge list on the Version Summary page.
   

Configure the Cartridge Path

Update the cartridge path in Business Manager so the server picks up the new code.

1. In Business Manager, select the App Launcher.
   
2. Select Administration | Manage Sites.
   
3. Select the Settings tab.
   
4. Enter your cartridge names. For SFRA, enter:
   
   • RefArch cartridge path: app_storefront_base
   • Business Manager cartridge path: bm_app_storefront_base

Import Sample Data

Use the SFRA sample data as a starting point. The data includes graphics for your test pages. The B2C Commerce admin often has a content asset import and management process in place. Use Business Manager Site Import to upload and import the sample data from the site-template directory in the repository you downloaded from GitHub.

For SFRA sites, zip the site_template_sfra directory or use the included site_template_sfra.zip file.

1. In Business Manager, select the App Launcher.
   
2. Select Administration | Site Development | Site Import & Export.
   
3. Select Choose File and select the zip file.
   
4. For SFRA sites, select site-template-sfra.zip.
   
5. Select Upload.
   
6. When the Status is Successful, select the file and select Import.
   
7. Select the site.
   
8. Rebuild the indexes.
   
   • In Business Manager, select the App Launcher.
     
   • Select Merchant Tools | Search | Search Indexes.
     
   • Select the indexes.
     
   • Select Rebuild.
     

Review Pages and Components in Page Designer

After importing sample data, you can review the SFRA Page Designer pages and components in Business Manager.

1. In Business Manager, select the App Launcher.
   
2. Select Merchant Tools | Content | Page Designer.
   
3. The Page Designer visual editor opens and shows any existing pages.
   
4. Select New to see available page layouts from SFRA.
   
5. Open the Components menu to view prebuilt component types organized into groups: Commerce Assets, Commerce Layouts, and Content.
   

The SFRA reference implementation includes dynamic page types for Product List and Product Detail pages, along with components like Dynamic Banner, Product Listing, and Image With Text that demonstrate data binding with dynamic attributes.

Up Next

In this unit, you configured your environment and then downloaded, compiled, uploaded, and imported sample Page Designer code and data for SFRA.

In the next unit, you take a closer look at the files in the SFRA repository and how they work together to create pages and components.

Resources

• Trailhead: Develop for Salesforce B2C Commerce
• Salesforce Developers: Get Started with SFRA
• Salesforce Developers: Compatibility Modes
• Salesforce Developers: Compatibility Mode Changes