|
| 1 | +--- |
| 2 | +description: B2C DX VS Code Extension feature tour — sandbox explorer, code sync, WebDAV, content libraries, SCAPI API browser, debugger, scaffold, CAP install, and CLI plugin support. |
| 3 | +--- |
| 4 | + |
| 5 | +# Features |
| 6 | + |
| 7 | +A guided tour of what the extension can do. All commands are reachable from the Command Palette under the **B2C DX** category — this page focuses on what each feature is *for* and the actions you can only reach through tree-view right-clicks. |
| 8 | + |
| 9 | +## Sandbox Realm Explorer |
| 10 | + |
| 11 | +Browse and manage on-demand sandboxes (ODS) for one or more realms in a dedicated activity-bar container (**B2C-DX Sandboxes**). The tree groups sandboxes by realm, and each row carries a state-derived context value (`sandbox-started`, `sandbox-stopped`, `sandbox-cloning`, `sandbox-settingup-cloned`, etc.) so the right-click menu only offers actions that make sense for the current state. |
| 12 | + |
| 13 | +**Lifecycle commands** (palette + right-click): create, start, stop, restart, clone, view details, view clone details, extend expiration, open Business Manager, delete. |
| 14 | + |
| 15 | +**Cloned sandbox indicators** — clones are tagged in the tree (the source sandbox shows as `cloning` while a target is being set up; the target shows as `setting up` until it stabilizes). The display logic is identical to the CLI's: see `computeSandboxDisplay` in the package source for the precise rules. |
| 16 | + |
| 17 | +<!-- TODO(screenshot): sandbox-explorer.png — started + cloned sandbox in the tree --> |
| 18 | + |
| 19 | + |
| 20 | +<!-- TODO(screenshot): sandbox-context-menu.png — right-click context menu over a started sandbox --> |
| 21 | + |
| 22 | + |
| 23 | +Polling cadence is controlled by [`b2c-dx.sandbox.pollingInterval`](./configuration#sandbox-polling-interval). |
| 24 | + |
| 25 | +## WebDAV Browser |
| 26 | + |
| 27 | +A tree of WebDAV catalogs and libraries plus a registered file-system provider (`b2c-webdav://`) so you can mount a remote folder as a workspace folder. |
| 28 | + |
| 29 | +**Tree-only actions** (right-click on a catalog, library, or directory): |
| 30 | + |
| 31 | +- **New File / New Folder / Upload File** — create or push directly to the instance. |
| 32 | +- **Open as Workspace Folder** — adds the WebDAV path as a workspace folder backed by the `b2c-webdav://` filesystem provider so it behaves like a local folder. |
| 33 | +- **Drag & drop** — drag files from your local Explorer into a WebDAV directory to upload. |
| 34 | +- **Add Catalog / Add Library** — register additional virtual roots for browsing. |
| 35 | + |
| 36 | +<!-- TODO(screenshot): webdav-browser.png — catalogs and libraries expanded --> |
| 37 | + |
| 38 | + |
| 39 | +<!-- TODO(screenshot): webdav-mounted.png — "Open as Workspace Folder" result --> |
| 40 | + |
| 41 | + |
| 42 | +## Content Libraries |
| 43 | + |
| 44 | +A focused view for Page Designer pages and components stored in your content libraries — filtered, exportable, and importable without leaving the editor. |
| 45 | + |
| 46 | +**Tree-only actions**: |
| 47 | + |
| 48 | +- **Export / Export without Assets / Export Assets Only** — three single-click exports for any page, content asset, or component. |
| 49 | +- **Filter / Clear Filter** — quick filter across the library tree when you have hundreds of pages. |
| 50 | +- **Browse in WebDAV** — jump from a library entry to the corresponding WebDAV path. |
| 51 | +- **Import Site Archive** — right-click a folder in the Explorer to import it as a site archive. |
| 52 | + |
| 53 | +<!-- TODO(screenshot): content-libraries.png — content tree with the export context menu --> |
| 54 | + |
| 55 | + |
| 56 | +## Cartridge Code Sync |
| 57 | + |
| 58 | +A **Cartridges** tree view (under the **B2C-DX** activity-bar container) lists every cartridge detected in your workspace. From there you can watch, deploy, and manage code versions per-cartridge — no all-or-nothing sync. |
| 59 | + |
| 60 | +**Title-bar actions**: **Refresh Cartridges**, **Deploy Cartridges**, **Code Versions** (list / create / activate). |
| 61 | + |
| 62 | +**Per-cartridge right-click actions**: **Upload Cartridge**, **Download from Instance**, **Compare with Instance** (diff view), **Add to Site Cartridge Path**, **Remove from Site Cartridge Path**. |
| 63 | + |
| 64 | +**Workspace toggles**: **Toggle Code Sync** / **Start Code Sync** / **Stop Code Sync** start a watcher that uploads on save. **Upload to Instance** is also available from the file Explorer's context menu when a code-sync session is active. |
| 65 | + |
| 66 | +<!-- TODO(screenshot): code-sync.png — Cartridges view with code-version dropdown --> |
| 67 | + |
| 68 | + |
| 69 | +<!-- TODO(screenshot): code-sync-diff.png — Compare with Instance result --> |
| 70 | + |
| 71 | + |
| 72 | +## SCAPI API Browser |
| 73 | + |
| 74 | +Browse SCAPI OpenAPI schemas for your instance and open a Swagger UI panel for any endpoint. Requires OAuth credentials (`clientId`, `clientSecret`) and `shortCode` in `dw.json` — see the [Authentication Setup guide](../guide/authentication). |
| 75 | + |
| 76 | +The view lives in its own activity-bar container (**B2C-DX: SCAPI**). Use **Refresh** to reload schemas after changing instances, and **Open API Documentation** to launch the Swagger UI panel. |
| 77 | + |
| 78 | +<!-- TODO(screenshot): api-browser.png — Swagger UI panel --> |
| 79 | + |
| 80 | + |
| 81 | +## B2C Script Debugger |
| 82 | + |
| 83 | +Registered as debug type `b2c-script`. Add a launch configuration to `.vscode/launch.json` to step through server-side B2C scripts: |
| 84 | + |
| 85 | +```jsonc |
| 86 | +{ |
| 87 | + "version": "0.2.0", |
| 88 | + "configurations": [ |
| 89 | + { |
| 90 | + "type": "b2c-script", |
| 91 | + "request": "launch", |
| 92 | + "name": "B2C Script Debugger" |
| 93 | + } |
| 94 | + ] |
| 95 | +} |
| 96 | +``` |
| 97 | + |
| 98 | +`cartridgePath` is auto-detected from the workspace; override it explicitly only if the cartridges live outside the workspace root. |
| 99 | + |
| 100 | +<!-- TODO(screenshot): script-debugger.png — paused on a breakpoint --> |
| 101 | + |
| 102 | + |
| 103 | +## Scaffold & CAP install |
| 104 | + |
| 105 | +**Scaffold** (`b2c-dx.scaffold.generate`) — quick-pick over the SDK's scaffold templates; appears in the **File → New File...** picker and as **New from Scaffold...** when you right-click a folder in the Explorer. |
| 106 | + |
| 107 | +**CAP install** (`b2c-dx.cap.install`) — appears on the right-click menu of a folder in the Explorer when the folder contains a `commerce-app.json`. Activation is also wired to `workspaceContains:**/commerce-app.json` so the extension auto-activates when you open a CAP project. |
| 108 | + |
| 109 | +<!-- TODO(screenshot): scaffold-picker.png — "New from Scaffold..." quick-pick --> |
| 110 | + |
| 111 | + |
| 112 | +## Page Designer Assistant |
| 113 | + |
| 114 | +`b2c-dx.openUI` opens a guided webview UI for scaffolding a Storefront Next page (PageType + Region definitions). The generated `.tsx` file is written to your workspace's `routes/` folder when one exists, or to a path you pick when the workspace has no routes folder. |
| 115 | + |
| 116 | +<!-- TODO(screenshot): page-designer-assistant.png --> |
| 117 | + |
| 118 | + |
| 119 | +## Log Tailing |
| 120 | + |
| 121 | +**Start Tailing Logs** / **Stop Tailing Logs** stream B2C log files into the editor (instance-side error/warn/info logs from `error-*.log`, `warn-*.log`, etc.). Output goes to a dedicated VS Code output channel; use [`b2c-dx.logLevel`](./configuration#log-level) to control extension log verbosity separately. |
| 122 | + |
| 123 | +## Active Instance Status Bar |
| 124 | + |
| 125 | +A status-bar item in the bottom-left shows the active B2C instance name, hostname, and a `$(pinned)` icon when project-root pinning is active. Clicking it runs **Switch Active Instance** — a quick-pick over instances declared in `dw.json` that updates the active instance and refreshes every view. |
| 126 | + |
| 127 | +## B2C CLI Plugin Support |
| 128 | + |
| 129 | +The extension uses the [B2C CLI](../guide/) under the hood for most of its operations. As a side effect, **any plugin you've installed via `b2c plugins install` propagates into the extension's behavior automatically** — there's no separate VS Code-side plugin registry. A plugin that adds a custom config source, a sandbox subcommand, or a middleware hook is honored by the corresponding extension features the next time the workspace loads. |
| 130 | + |
| 131 | +This mirrors the same plugin propagation already documented for the [MCP server](../mcp/#plugins). |
| 132 | + |
| 133 | +See: |
| 134 | + |
| 135 | +- [Custom Plugins](../guide/extending) — author your own CLI plugin. |
| 136 | +- [3rd Party Plugins](../guide/third-party-plugins) — community plugins (e.g., `b2c-plugin-intellij-sfcc-config`). |
0 commit comments