# 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](/docs/commerce/b2c-commerce/guide/sfnext-quick-start-create-bm.md) or [Create Storefront Next in Business Manager with a GitHub Repository](/docs/commerce/b2c-commerce/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"
   ```

   :::note
   `SFCC_OAUTH_CLIENT_ID` and `SFCC_OAUTH_CLIENT_SECRET` are also accepted as configuration values for the Account Manager client and secret. If the `.env` file doesn't include `SFCC_SERVER` and `SFCC_CODE_VERSION`, the `pnpm cartridge` command automatically derives them for sandbox instances.
   :::

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

   ```
   {
     "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. Replace `{sandbox-hostname}` with the domain of your sandbox or developer instance. For example: `abcd-001.dx.commercecloud.salesforce.com`.

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