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:

In your Storefront Next local project folder, add a file with the name dw.json with this content.

1{
2  "hostname": "{sandbox-hostname}",
3  "code-version": "version1",
4  "username": "{sandbox-username}",
5  "password": "{access-key}"
6}

Instead of using the dw.json file, you can add configurations to the .env file. See Configuration in the B2C Developer Toolkit.

Note

Replace the placeholders in dw.json 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.

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

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

e. 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.