# What Build Tools Are Employed by Wand Enhancer? A Deep Dive into the Hybrid Build Pipeline > Discover the hybrid build pipeline of Wand Enhancer. See how MSBuild, dotnet CLI, pnpm, TypeScript, Vite, and Vitest combine for efficient development. - Repository: [k1tbyte/Wand-Enhancer](https://github.com/k1tbyte/Wand-Enhancer) - Tags: deep-dive - Published: 2026-07-13 --- **Wand Enhancer employs a hybrid build toolchain combining MSBuild and the dotnet CLI for its .NET WPF application with pnpm, TypeScript, Vite, and Vitest for the JavaScript/TypeScript web panel.** The open-source repository `k1tbyte/Wand-Enhancer` orchestrates a complex, cross-language build process that bridges native Windows desktop development with modern web technologies. Understanding the specific build tools employed by Wand Enhancer is essential for contributors looking to compile the application from source or modify the Electron-based web panel. This article examines each component of the build pipeline, from NuGet package restoration to ASAR archive manipulation. ## .NET Desktop Build: MSBuild and dotnet CLI The foundation of Wand Enhancer relies on standard .NET tooling to compile the WPF host application. The build process centers on `WandEnhancer/WandEnhancer.csproj`, which defines the MSBuild configuration, NuGet package dependencies, and compilation targets for producing the `WandEnhancer.exe` binary. The MSBuild system, invoked via the `dotnet` CLI, handles the entire lifecycle of the desktop component: - **Restoration**: `dotnet restore` downloads NuGet packages defined in the project file - **Compilation**: `dotnet build` compiles the C# source and produces the executable - **Integration**: The resulting binary embeds the web-panel assets generated by the JavaScript build pipeline This native Windows toolchain ensures the application compiles as a standard .NET Framework or .NET Core WPF application depending on the target framework specified in the project configuration. ## JavaScript/TypeScript Build Stack The web panel and Electron bridge utilize a modern JavaScript ecosystem managed entirely through pnpm. This layer operates independently but feeds assets into the .NET build process. ### Package Management with pnpm **pnpm** serves as the Node package manager for the `web-panel/` directory, handling all npm dependencies through [`web-panel/package.json`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/package.json). Unlike npm or yarn, pnpm employs a content-addressable store and strict dependency isolation, which the project leverages through [`pnpm-lock.yaml`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/pnpm-lock.yaml) for reproducible installs. The [`package.json`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/package.json) file defines orchestration scripts that chain together the various build tools, ensuring consistent execution across development and CI environments. ### TypeScript Compilation The project uses the **TypeScript compiler (`tsc`)** for type-checking and transpilation. Configuration resides in [`web-panel/tsconfig.json`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/tsconfig.json), which controls how TypeScript source files under `web-panel/src/` are processed. During the build phase, `tsc` performs: - Static type analysis and error detection - Emission of JavaScript files and declaration files - Module resolution for the web panel's component architecture ### Frontend Bundling with Vite **Vite** provides the production build infrastructure for the web panel. Configured in [`web-panel/vite.config.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/vite.config.ts), the tool handles: - Fast development server with hot module replacement - ES-module bundling and tree-shaking - Production minification and asset optimization - Integration with Preact aliasing and Tailwind CSS The `vite build` step generates static assets that are subsequently packaged into the Electron ASAR file, which the .NET application eventually embeds. ### Bridge Compilation A custom TypeScript build process handles the Electron-to-native bridge. The `build:bridge` script (defined in [`package.json`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/package.json)) compiles source files located in `web-panel/bridge/src/` into a single CommonJS bundle at `web-panel/dist/bridge.cjs`. This bridge bundle serves as the runtime communication layer between the Electron renderer process and the native Wand process, requiring separate compilation from the main web panel code. ## Testing and Quality Assurance **Vitest** powers the unit testing framework for the JavaScript codebase. The test suite validates protocol implementations and utility functions (e.g., [`protocol/validation.test.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/protocol/validation.test.ts)), ensuring the Electron bridge and web panel logic function correctly before integration. The `test` script in [`package.json`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/package.json) enforces a build dependency: it first executes `build:bridge` to ensure the latest bridge code is compiled, then launches Vitest to run the actual test suite. This guarantees that tests always execute against the current bridge implementation. ## Continuous Integration and Deployment **GitHub Actions** automates the complete build pipeline through workflow files located in `.github/workflows/`. The CI configuration orchestrates the cross-language toolchain: 1. Restores pnpm and installs Node dependencies 2. Executes `pnpm run build` to generate web assets 3. Runs the .NET build process via `dotnet build` 4. Validates the produced ASAR archives 5. Publishes release artifacts This automation ensures that every pull request and release tag produces a reproducible build across the hybrid .NET/JavaScript stack. ## ASAR Archive Management To manipulate Electron's ASAR archives, the project employs **AsarSharp**, a C# library defined in `AsarSharp/AsarSharp.csproj`. This library provides utilities to extract, modify, and recreate `app.asar` files, compiling alongside the main .NET application. The AsarSharp tooling integrates directly with the WPF application code, allowing runtime modification of embedded web resources without requiring a full rebuild of the TypeScript sources. ## How to Build Wand Enhancer Locally Developers can execute the full build chain using standard shell commands. Below are the complete procedures for building the entire application or individual components. ### Full Application Build (Windows PowerShell) ```powershell # Restore .NET solution dependencies dotnet restore # Build the WPF desktop application dotnet build WandEnhancer/WandEnhancer.csproj -c Release # Install JavaScript dependencies (requires pnpm) pnpm install # Build web panel and bridge pnpm run build # executes: tsc && vite build && pnpm run build:bridge ``` ### Web-Panel Only Build ```bash # Install dependencies (one-time setup) pnpm install # Compile Electron bridge separately pnpm run build:bridge # produces web-panel/dist/bridge.cjs # Build TypeScript and Vite production bundle pnpm run build # runs full TypeScript compilation and Vite bundling ``` ### Running Tests ```bash # Execute test suite (auto-builds bridge first) pnpm run test ``` ## Summary - **Wand Enhancer** uses **MSBuild/dotnet CLI** for the .NET WPF application compilation via `WandEnhancer/WandEnhancer.csproj` - **pnpm** manages JavaScript dependencies and executes build scripts defined in [`web-panel/package.json`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/package.json) - **TypeScript (`tsc`)** handles type-checking and transpilation configured in [`web-panel/tsconfig.json`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/tsconfig.json) - **Vite** bundles the frontend assets and manages the development server through [`web-panel/vite.config.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/vite.config.ts) - **Vitest** runs the unit test suite for protocol validation and bridge functionality - **GitHub Actions** automates the CI/CD pipeline in [`.github/workflows/build.yml`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/.github/workflows/build.yml) - **AsarSharp** provides C# utilities for ASAR archive manipulation in `AsarSharp/AsarSharp.csproj` ## Frequently Asked Questions ### Does Wand Enhancer use npm or yarn for package management? Wand Enhancer uses **pnpm** exclusively for the web panel and Electron bridge components. The presence of [`pnpm-lock.yaml`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/pnpm-lock.yaml) and the scripts defined in [`web-panel/package.json`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/package.json) confirm pnpm as the required package manager, offering faster installation times and stricter dependency resolution than npm or yarn. ### How is the Electron bridge compiled? The bridge is compiled via a **custom TypeScript build** executed through the `build:bridge` npm script. This process transforms TypeScript source files in `web-panel/bridge/src/` into a single CommonJS bundle at `web-panel/dist/bridge.cjs`, which serves as the interoperability layer between the Electron renderer and the native Wand process. ### What CI/CD platform does Wand Enhancer use? The project employs **GitHub Actions** for continuous integration, configured in [`.github/workflows/build.yml`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/.github/workflows/build.yml). The workflow automatically restores pnpm dependencies, executes the JavaScript and .NET build chains, validates ASAR archives, and publishes release artifacts without manual intervention. ### Can I build the web panel independently of the .NET application? Yes, developers can build the web panel in isolation by running `pnpm install` followed by `pnpm run build` within the `web-panel/` directory. This workflow executes TypeScript compilation and Vite bundling without invoking MSBuild, though the resulting assets must eventually be integrated into the .NET application for full functionality.