Deploy the Storefront Next Cartridge for Page Designer

Deploy the cartridge that contains Page Designer metadata for Page Designer pages after the initial storefront setup in Business Manager with local code. Also, every time you modify Page Designer components or add pages, deploy the Storefront Next cartridge to upload Page Designer metadata to the B2C Commerce instance.

The initial storefront setup with a GitHub repository deploys the Storefront Next cartridge via a GitHub action. There is no need to manually deploy the cartridge. Only if you modify Page Designer items, deploy the cartridge to update the Page Designer metadata.

Note

Prerequisites:

A developer B2C Commerce instance or on-demand sandbox (ODS) instance.
A Storefront Next project that you created locally on your system after the storefront setup in Business Manager. See Create Storefront Next in Business Manager with Local Code or Create Storefront Next in Business Manager with a GitHub Repository.
The B2C DX CLI. See Installation in the B2C Developer Toolkit.

To deploy the Storefront Next cartridge:

To configure the B2C Commerce credentials, use the .env file or the dw.json. Do one of these steps.

a. In the .env file that’s part of your Storefront Next local storefront project folder, add these variables.
1SFCC_SERVER="{sandbox-hostname}" 2SFCC_CODE_VERSION="version1" 3SFCC_CLIENT_ID="Account-Manager-client-ID" 4SFCC_CLIENT_SECRET="Account-Manager-client-secret"
b. Alternatively, create the dw.json file in your Storefront Next local project folder. Add this content.
1{ 2 "hostname": "{sandbox-hostname}", 3 "code-version": "version1", 4 "username": "{sandbox-username}", 5 "password": "{access-key}" 6}
For more information about the B2C Commerce configuration files, see Configuration in the B2C Developer Toolkit.
Note
Replace the hostname and code version placeholders with valid values.

a. {sandbox-hostname} with the domain of your sandbox or developer instance.

b. Get your active code version from Administration > Site Development > Code Deployment. Replace version1 with your active version, if different.
If you’re using the .env file, replace the Account Manager client ID and client secret placeholders. If you created the storefront in Business Manager, get the Account Manager client ID and client secret from the downloaded credentials file. Otherwise, get them from Account Manager.
If you’re using the dw.json file:

a. Replace {sandbox-username} with your sandbox user name, which is in email format.

b. Generate your access key in Business Manager. See Create an Access Key for Logins for B2C Commerce in Saleforce Help.

c. Copy the access key and replace {access-key} with it.
Generate and deploy the Storefront Next cartridge by running these commands. You don’t need to specify the cartrige path. The cartridge is in the cartridges/app_storefrontnext_base folder.
1pnpm cartridge:generate 2pnpm cartridge:deploy
The cartridge deployment adds the metadata of Page Designer pages and components to your B2C Commerce instance.

Automatic Cartridge Sync with the VS Code Extension

The B2C Commerce VS Code extension supports deploying cartridges from within VS Code and automatic upload on file changes. If you develop your storefront in VS Code with the Salesforce B2C Commerce extension, any changes to cartridges are automatically sync’d to your sandbox. There is no need to manually perform the cartridge deployment. For more information, see Salesforce B2C Commerce VS Code Extension and Cartridge Management and Code Watch/Upload.