# Dynamo Webview Component Scaffold

> Scaffolds a new Dynamo package repo that hosts a view extension with a WebView2-embedded React frontend. Use when setting up a new repo following the Switchboard pattern — Dynamo package structure, build pipeline, system tests, and bidirectional C#/TypeScript messaging.

- Skill: `dynamods/dynamo-webview-component-scaffold` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dynamods/dynamo-webview-component-scaffold`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dynamods/dynamo-webview-component-scaffold/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: dynamods (https://skillmd.com/u/dynamods)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dynamods/dynamo-webview-component-scaffold

---


# Dynamo WebView Component Scaffold

You scaffold new Dynamo extension repos following the Switchboard pattern. The reference implementation is DynamoDS/Dynamo-Switchboard.

## Project Structure

```
src/
  {Product}.sln
  Directory.Build.props          # central: DynamoVersion, Product, deployment paths
  common.tasks                   # ReplaceFileText MSBuild task
  nuget.config                   # Autodesk Artifactory + nuget.org sources
  {Product}.ViewExtension/       # net8.0-windows, IViewExtension + WebView2 host
  {Product}.Messages/            # net8.0, shared C#/TS message types
  {Product}.SystemTests/         # net8.0-windows, NUnit + SystemTestBase
  {Product}.WebView/             # React + Vite + TypeScript frontend
  packageItems/
    pkg.json                     # template — version/name replaced at build time
    extra/
      {Product}_ViewExtensionDefinition.xml
scripts/
  build.ps1                      # TypeScript codegen → npm build → dotnet build
  create-package-zip.ps1
tools/
  WriteTypescript/               # Roslyn-based C# → TypeScript type generator
pipeline.yml                     # Jenkins: build → test → publish artifact
```

## Package Output Structure

```
deploy/{Configuration}/{Product}/
  bin/           # assemblies + dist/ (React build output)
  extra/         # ViewExtensionDefinition.xml
  pkg.json       # populated at build time from Directory.Build.props
```

## Key Patterns

**ViewExtension**
- Implements `IViewExtension` with `UniqueId`, `Startup`, `Loaded`, `Shutdown`
- Loads dependent assemblies in a custom `AssemblyLoadContext` to avoid version conflicts
- Accesses `IOAuth2AuthProvider` and `PathManager` from Dynamo via `ViewLoadedParams`

**WebView2 hosting**
- `Microsoft.Web.WebView2` NuGet with `ExcludeAssets="runtime"` (relies on system runtime)
- User data folder: `{DynamoUserDataDir}/{Product}WebView`
- Additional browser arg: `--allow-file-access-from-files`
- Loads React app from `file://{bin}/dist/index.html`

**C# ↔ TypeScript messaging**
- `WebViewMessage` base class with `[JsonDerivedType]` for polymorphic JSON
- C# → TS: `CoreWebView2.PostWebMessageAsString(json)`
- TS → C#: `CoreWebView2.WebMessageReceived` event
- Types auto-generated from C# to TypeScript by WriteTypescript tool during build

**System tests**
- Inherit `SystemTestBase` from DynamoVisualProgramming.Tests
- `TestServices.dll.config` with `%DynamoBasePath%` placeholder replaced by MSBuild
- `[SetUpFixture]` registers `AppDomain.AssemblyResolve` for Dynamo binaries
- Tests load the actual built package from `src/deploy/{Configuration}/{Product}/`
- NUnit STA apartment state required; JUnit XML output for CI reporting

**Build**
- `Directory.Build.props` defines `DynamoVersion`, `Product`, `DeployTargetFolders`
- MSBuild targets: `CopyReactApp` (AfterBuild), `CopyOutputToPackageFolder` (AfterBuild), `CreatePkgJson` (AfterBuild)
- `build.ps1` enforces order: WriteTypescript codegen → `npm ci && npm run build` → `dotnet build`
- `pipeline.yml`: Jenkins, Windows node, weekly schedule, publishes `{Product}.zip` to Autodesk package manager

## When scaffolding a new repo

1. Replace all instances of `Switchboard`/`DynamoSwitchboard` with the new product name
2. Generate a new `UniqueId` GUID for the ViewExtension
3. Update `DynamoVersion` in `Directory.Build.props` to the target Dynamo version
4. Update NuGet package sources in `nuget.config` if the new repo uses different feeds
5. Stub out the Messages project with at minimum one message type in each direction
6. Verify the ViewExtensionDefinition.xml AssemblyPath matches the output DLL name