---
schema_version: "1"
id: f2ea2a09c9643f664f1fe60100917f2b8d685144d4eb555a86457a93ca09bdcb
title: Deploy the Storefront Next Cartridge for Page Designer
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/sfnext/guides/sfnext-pd-deploy-cartridge.md
canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/sfnext-pd-deploy-cartridge.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 522b1aba569e24a9cd0a2adea00b02dca3c19152ab017c8642c278d613c8d1b1
products:
  - Composable Storefront
  - Salesforce APIs
---
# 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.

**note:** 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.

## 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](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/sfnext-quick-start-create-bm.md) or [Create Storefront Next in Business Manager with a GitHub Repository](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/sfnext-quick-start-create-bm-github.md).
- The B2C CLI. See [Installation](https://salesforcecommercecloud.github.io/b2c-developer-tooling/guide/installation.html) in the Agentic B2C Developer Toolkit.

To deploy the Storefront Next cartridge:

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

    ```
    SFCC_SERVER="{sandbox-hostname}"
    SFCC_CODE_VERSION="version1"
    SFCC_CLIENT_ID="Account-Manager-client-ID"
    SFCC_CLIENT_SECRET="Account-Manager-client-secret"
    ```

    b. Alternatively, create the `dw.json` file in your Storefront Next local project folder. Add this content.

    ```
    {
      "hostname": "{sandbox-hostname}",
      "code-version": "version1",
      "username": "{sandbox-username}",
      "password": "{access-key}"
    }
    ```

    **note:** For more information about the B2C Commerce configuration files, see [Configuration](https://salesforcecommercecloud.github.io/b2c-developer-tooling/guide/configuration.html) in the Agentic B2C Developer Toolkit.

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

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

4.  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](https://help.salesforce.com/s/articleView?id=cc.b2c_access_keys_for_business_manager.htm&type=5) in _Saleforce Help_.

    c. Copy the access key and replace `{access-key}` with it.

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

    ```
    pnpm cartridge:generate
    pnpm 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. Enable code watch to upload cartridge changes to your sandbox as you save files, or use the extension's upload commands for manual deployment. For more information, see [Salesforce B2C Commerce VS Code Extension](https://salesforcecommercecloud.github.io/b2c-developer-tooling/vscode-extension/) and [Cartridge Management and Code Watch/Upload](https://salesforcecommercecloud.github.io/b2c-developer-tooling/vscode-extension/#cartridge-management-and-code-watch-upload).