> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Lab - Deploying Your Buyer Portal

Plan: B2B Developer

Lesson 23 of 25 · 30 min

## Introduction

You've spent several exercises customizing your own fork of the B2B Buyer Portal. Loading this custom code into your Stencil storefront from your locally running server has worked well so far, but of course you ultimately need your Buyer Portal to be deployed and available from a publicly accessible URL.

In this exercise, we'll practice deploying your Buyer Portal via the built-in WebDAV storage available in your BigCommerce store.

### In this lab, you will:

* Build your Buyer Portal assets
* Deploy Buyer Portal files to your store's WebDAV storage
* Update your store's header/footer scripts to load the production-ready Buyer Portal

### Prerequisites

* A local Buyer Portal project as completed in previous lab exercises
* A BigCommerce [sandbox store](/developer/docs/overview/sandboxes) or [trial store](https://www.bigcommerce.com/essentials/)
* B2B Edition enabled in your store
* A Stencil storefront channel, enabled for B2B
* A command-line interface on your local machine
* Node.js 22 or later
* The [yarn](https://yarnpkg.com/getting-started/install) package manager
* A WebDAV client configured with your store's WebDAV credentials

> **Info**
>
> **WebDAV Client**
>
> The most notable new prerequisite for this lab is a WebDAV client.
>
> [Cyberduck](https://cyberduck.io/) is a popular free WebDAV client.
>
> See the [BigCommerce documentation](https://support.bigcommerce.com/s/article/File-Access-WebDAV) for instructions on generating WebDAV credentials in your store control panel and configuring your client.
>
> Once you have your WebDAV client configured and successfully connecting to your storage, you are ready to proceed!

## Setup

> **Info**
>
> As a reminder, you're responsible for your own source control during these exercises. This would be a good time to commit all your previous work!

This exercise continues where you left off previously. If you want to start with a fresh copy of the completed project (for example, if you encounter any build errors), you can use the following command to clone the finished state:

```shell showLineNumbers={false}
degit https://github.com/bigcommerce-edu/lab-b2b-buyer-portal.git#e-complete <directory-name>
```

Don't forget to copy `.env-example` as `.env`.

## Step 1: Determine Your Base URL

Before we build the Buyer Portal assets, we need to determine the fully qualified URL where these assets will ultimately reside.

Once we get to the step of deploying the Buyer Portal files to your store's WebDAV storage, we will be uploading them to a specific subdirectory: `content/b2b-1.0/`.

This relative path will be appended directly to your store's base URL. This base URL is the same URL you use to browse to the storefront (and can also be found in your control panel with the "View storefront(s)" link in the top navigation bar.)

**Buyer Portal Base URL:** `https://<my-store-domain>/content/b2b-1.0/`

> **Info**
>
> In a sandbox or pre-production store with no domain applied, your store base URL will be `<my-store-prefix>.mybigcommerce.com`. This means your Buyer Portal base URL will be in the form:
>
> `https://<my-store-prefix>.mybigcommerce.com/content/b2b-1.0/`

## Step 2: Build the Buyer Portal Assets

1. **Open** `.env` in your Buyer Portal project and **edit** or **add** vars as follows.

| Variable                     | Value                                                     |
| ---------------------------- | --------------------------------------------------------- |
| VITE\_IS\_LOCAL\_ENVIRONMENT | FALSE                                                     |
| VITE\_ASSETS\_ABSOLUTE\_PATH | The Buyer Portal base URL determined in the previous step |
| VITE\_DISABLE\_BUILD\_HASH   | TRUE                                                      |

> **Info**
>
> Make sure to include the trailing slash in the VITE\_ASSETS\_ABSOLUTE\_PATH value.

2. **Run** the build command from the root directory of your project.

```shell showLineNumbers={false}
yarn build
```

> **Info**
>
> When rebuilding your custom Buyer Portal, you should clear the local contents of `.turbo/cache` before running `yarn build`

**After building, `apps/storefront/dist` should contain the final Buyer Portal assets.**

![Buyer Portal dist files](/_fern-files/bigcommerce.docs.buildwithfern.com/f7df3f838ade77cd3d56d4588671ce9824797bd7899a6dd2b256147918a2eacc/assets/learn/b2b-buyer-portal/buyer-portal-dist.gif)

> **Info**
>
> **Troubleshooting**
>
> If you encounter any errors during the build and you've modified the code beyond the steps shown in these lab exercises, review the error messages in the terminal output.
>
> All TypeScript checks must pass in order for the build to complete successfully, so any TypeScript errors introduced in your code must be addressed.
>
> If necessary, try a fresh clone of the completed project. (See Setup above.)

## Step 3: Upload to WebDAV Storage

1. **Open** your WebDAV client (e.g., Cyberduck) and **connect** to your store's WebDAV storage.
2. **Upload** the `dist` directory from `apps/storefront` into the `content` directory in WebDAV.

With a client like Cyberduck, it's easiest to open your project in your file manager and drag `dist` into the `content` folder in the client app.

![Uploading with Cyberduck](/_fern-files/bigcommerce.docs.buildwithfern.com/55a861294b14873d1e4e8bf071a7b7efb7e3c9681ad7fc293d1d05763482d921/assets/learn/b2b-buyer-portal/upload-with-webdav.gif)

3. In your WebDAV client, **rename** the `dist` directory to `b2b-1.0`.

The result should be a viable public URL on your storefront in this form:

`https://<my-store-domain>/content/b2b-1.0/index.js`

4. **Verify** that your Buyer Portal files have been uploaded to the correct location by **browsing** directly to the `index.js` URL in the form shown above.

**Your browser should render the raw content of the `index.js` file.**

## Step 4: Update Storefront Settings

Your storefront scripts are currently loading the Buyer Portal assets from your local development server. We need to update them to load the production-ready assets from your store's WebDAV storage. More than just the file paths will differ with these scripts.

1. **Log into** your BigCommerce control panel.
2. **Navigate** to Script Manager.
3. **Update** the header script as described in the [Stencil Guide](https://github.com/bigcommerce/b2b-buyer-portal/blob/main/docs/stencil.md#deploying-the-project) in the Buyer Portal repo.

See the link above for the latest version of the header and footer scripts.

> **Info**
>
> Make sure you are using the scripts under the "Deploying the project" section, not "Running Project Locally". The format of the scripts is different.

The **header** script should look something like the following:

```html showLineNumbers={false}
<script>
var b2bHideBodyStyle = document.createElement('style');
b2bHideBodyStyle.id = 'b2b-account-page-hide-body';
{{#if customer.id}}
  {{#contains page_type "account"}}
    b2bHideBodyStyle.innerHTML = 'body { display: none !important }';
    document.head.appendChild(b2bHideBodyStyle);
  {{/contains}}
{{/if}}
{{#if page_type "login"}}
  b2bHideBodyStyle.innerHTML = 'body { display: none !important }';
  document.head.appendChild(b2bHideBodyStyle);
{{/if}}
const removeCart = () => {
  const style = document.createElement('style');
  style.type = 'text/css';
  style.id = 'b2bPermissions-cartElement-id'
  style.innerHTML='[href="/cart.php"], #form-action-addToCart, [data-button-type="add-cart"], .button--cardAdd, .card-figcaption-button, [data-emthemesmodez-cart-item-add], .add-to-cart-button { display: none !important }'
  document.getElementsByTagName('head').item(0).appendChild(style);
}
removeCart()
</script>
```

4. **Save** the header script.
5. **Update** the footer script as described in the Stencil Guide.

The **footer** script should look something like:

```html showLineNumbers={false}
<script>
  window.b3CheckoutConfig = {
    routes: {
      dashboard: '/account.php?action=order_status',
    },
  }
  window.B3 = {
    setting: {
      store_hash: '{{settings.store_hash}}',
      channel_id: {{settings.channel_id}},
      platform: 'bigcommerce'
    },
    'dom.checkoutRegisterParentElement': '#checkout-app',
    'dom.registerElement':
      '[href^="/login.php"], #checkout-customer-login, [href="/login.php"] .navUser-item-loginLabel, #checkout-customer-returning .form-legend-container [href="#"]',
    'dom.openB3Checkout': 'checkout-customer-continue',
    before_login_goto_page: '/account.php?action=order_status',
    checkout_super_clear_session: 'true',
    'dom.navUserLoginElement': '.navUser-item.navUser-item--account',
  }
</script>
<script
  type="module"
  crossorigin=""
  src="<YOUR_APP_URL_HERE>/index.*.js"
></script>
<script
  nomodule=""
  crossorigin=""
  src="<YOUR_APP_URL_HERE>/polyfills-legacy.*.js"
></script>
<script
  nomodule=""
  crossorigin=""
  src="<YOUR_APP_URL_HERE>/index-legacy.*.js"
></script>
```

6. **Modify** the footer script to replace `<YOUR_APP_URL_HERE>` with the Buyer Portal base URL determined in the previous steps, as well as to remove the `*.` from each filename.

Example:

```html showLineNumbers={false}
<script
  type="module"
  crossorigin=""
  src="https://<my-store-domain>/content/b2b-1.0/index.js"
></script>
```

7. **Save** the footer script.

**With your new scripts in place, navigate to your storefront. Verify that your custom Overview page functionality still works. Watch the network tab in your browser dev tools to verify that `index.js` is loading from your deployed location.**

> **Info**
>
> **Troubleshooting**
>
> If your browser dev tools show that B2B-related assets are failing to load or throwing errors:
>
> * Double check that the `VITE_ASSETS_ABSOLUTE_PATH` in your project matches the base URL you are including in Script Manager. (A rebuild will be necessary if this is incorrect.)
> * Verify that you can browse directly to the `index.js` URL in your browser and see the raw content of the file.
> * Double check the URLs in the footer script in Script Manager.

## Final Considerations

### Switching Back to Local Development

To summarize the steps required to switch your storefront back to using the local Buyer Portal server:

1. Update `.env` to set `VITE_IS_LOCAL_ENVIRONMENT` to `TRUE`.
2. Run `yarn dev` to start the local dev server.
3. Update your header and footer scripts in Script Manager to the appropriate scripts from the [Stencil Guide](https://github.com/bigcommerce/b2b-buyer-portal/blob/main/docs/stencil.md#running-the-project).

> **Info**
>
> Remember to pay attention to the port your local server is running on and incorporate this in your scripts.

### Subsequent Deployments

As you go through development cycles to iterate on your custom Buyer Portal, subsequent deployments should involve the following:

1. Formulate a new base URL for your Buyer Portal assets. (e.g., `https://<my-store-domain>/content/b2b-1.1/`)
2. Update `.env` to set `VITE_ASSETS_ABSOLUTE_PATH` to the new base URL.
3. Repeat the steps for building and deploying your assets.
4. Update the footer script in Script Manager with the new base URL.

Note that because we're using a directory-based strategy (`b2b-1.1`) for versioning, the previously deployed version of the Buyer Portal will continue to be used up until your footer script is updated. If there are any issues with the new version, reverting is as easy as updating your footer script back to the old URL.

### The Build Hash

Our inclusion of a unique directory with a version number in the assets URL is an example of "cache busting." Because the assets' URLs change when you deploy a new version, Buyer Portal functionality will not be disrupted by stale cached assets.

You might also choose to use a date-based directory name, such as `b2b-20270101`.

Contrasting with a directory-based approach, you might also choose to use the built-in build hash for versioning and cache busting. Enable this default behavior by removing `VITE_DISABLE_BUILD_HASH` from `.env` before building.

With the default hash behavior, each build file will be suffixed with a hash value (e.g., `index.<hash>.js`). If you rely on this approach for cache busting, you might be using a URL like the following in Script Manager:

`https://<my-store-domain>/content/b2b/index.<hash>.js`

The benefits of the hash approach are that you don't have to manually create a version naming convention, and that `VITE_ASSETS_ABSOLUTE_PATH` can remain consistent rather than changing with each new version. The downside is that you will always overwrite your previous build files when deploying, making the old build files immediately inaccessible and making it more complicated to roll back to a previous build.

### Bring Your Own CDN

In this exercise, we've used the built-in WebDAV storage available in your BigCommerce store to host your Buyer Portal assets. This is a viable option for production stores as well as sandbox scenarios.

However, you might prefer to use a third-party CDN to host your build files, based on your infrastructure needs or your organization's policies or existing services. Buyer Portal static assets can be loaded from any publicly accessible URL. Just make sure to pre-determine the base URL where your assets will be available and set `VITE_ASSETS_ABSOLUTE_PATH` accordingly before building.

### More Information

See the [Buyer Portal documentation](/developer/docs/b2b-edition/storefront/buyer-portal/stencil#building-and-deploying) regarding building and deploying.

> **Info**
>
> **In Catalyst**
>
> If you're using the available Catalyst integration with the Buyer Portal, some steps followed in this lab will be different. As previously discussed, the code for injecting the portal lives within the Catalyst codebase rather than relying on Script Manager. In addition, you might choose to deploy your Buyer Portal build files directly with your Catalyst project.
>
> See the [Catalyst guide](/developer/docs/storefront/catalyst/experiments/b2b-edition) for a more detailed discussion.

## Resources

* [Cyberduck](https://cyberduck.io/)
* [WebDAV Configuration](https://support.bigcommerce.com/s/article/File-Access-WebDAV)
* [Stencil Guide](https://github.com/bigcommerce/b2b-buyer-portal/blob/main/docs/stencil.md#deploying-the-project)
* [Build/Deploy Guide](/developer/docs/b2b-edition/storefront/buyer-portal/stencil#building-and-deploying)