pcf-vite-harness
Advanced tools
Modern Vite-based development harness for PowerApps Component Framework (PCF) with hot module replacement and PowerApps-like environment simulation
⚠️ DISCLAIMER: PROOF OF CONCEPT
This project is a proof of concept and should not be used in production environments. It is intended for experimentation and demonstration purposes only. The code has not been thoroughly tested or validated for production use cases.
⚠️ CAUTION: AI-Generated Code
This project was developed using AI assistance (Claude Code). Users should evaluate the code thoroughly before production use.
⚠️ IMPORTANT: Bundler Compatibility Limitations
This tool uses Vite bundler for development while PCF uses webpack for production builds. These have fundamental compatibility differences that may cause issues. Code that works in this harness may fail when built with PCF's webpack bundler.
📖 Read the full technical details in BUNDLER-COMPATIBILITY.md
A modern Vite-based development harness for PowerApps Component Framework (PCF) components with hot module replacement and PowerApps-like environment simulation.
dataverse-utilities for real data testingNavigate to your PCF project directory
cd your-pcf-project
Run the initializer
npx pcf-vite-harness
# or explicitly:
npx pcf-vite-harness init
The CLI will:
Start development
npm run dev:pcf
Create a complete new PCF project with Vite harness pre-configured:
npx pcf-vite-harness create
Your PCF component will open at http://localhost:3000 with full HMR support!
If you prefer manual setup or need explicit dependency control:
# Install the harness locally
npm install pcf-vite-harness --save-dev
Then create the development files in a dev/ directory. See the templates directory for examples.
pcf-vite-harness - Unified CLI ToolThe main command with subcommands for different workflows:
pcf-vite-harness init - Add Harness to Existing ProjectControlManifest.xml filesnpx pcf-vite-harness init
The CLI will guide you through:
pcf-vite-harness create - Create New PCF ProjectCreates a complete PCF project using Power Platform CLI (pac) with Vite harness pre-configured:
pac pcf initfield and dataset component typesControlManifest.Input.xmlnpx pcf-vite-harness create
The CLI will guide you through:
pcf-vite-harness generate-context - Regenerate ContextRegenerates the context configuration after completing the setup wizard:
npx pcf-vite-harness generate-context
Use this command after completing the browser-based setup wizard to ensure your development context includes all the dataset configurations discovered during setup.
import { initializePCFHarness } from 'pcf-vite-harness';
import { YourPCFComponent } from '../YourComponent/index';
initializePCFHarness({
pcfClass: YourPCFComponent,
contextOptions: {
displayName: 'John Doe',
userName: 'john.doe@company.com',
controlId: 'custom-control-id',
viewId: 'custom-view-id'
},
className: 'custom-container-class'
});
The dataverse-utilities package is automatically included and configured. To enable Dataverse integration:
Set your Dataverse URL in .env:
VITE_DATAVERSE_URL=https://yourorg.crm.dynamics.com/
Configure Dataverse URL:
export default createPCFViteConfig({
dataverseUrl: process.env.VITE_DATAVERSE_URL
});
Use Dataverse Web API in your component:
// Your component can now make calls to /api/data/v9.2/...
const response = await fetch('/api/data/v9.2/accounts?$top=10');
const data = await response.json();
For dataset components only, the harness includes a setup wizard accessible at /setup when running the development server. This wizard helps configure your dataset component with real Dataverse data:
# Start your development server
npm run dev:pcf
# Navigate to the setup wizard
# http://localhost:3000/setup
Note: The setup wizard is only available for dataset components because they require complex configuration involving table relationships, views, and dataset properties. Field components have simpler requirements and don't need this multi-step setup process.
import { createMockContext, initializePCFHarness } from 'pcf-vite-harness';
const customContext = createMockContext({
displayName: 'Custom User',
datasetOptions: {
loading: false,
// Add custom dataset properties
}
});
initializePCFHarness({
pcfClass: YourPCFComponent,
customContext
});
| Feature | PCF Test Harness | PCF Vite Harness |
|---|---|---|
| Hot Reload | ❌ No | ✅ Instant HMR |
| Modern Tooling | ❌ Webpack 4 | ✅ Vite |
| PowerApps Environment | ✅ Basic | ✅ Accurate Replica |
| Dataverse Integration | ❌ No | ✅ Optional |
| TypeScript Support | ✅ Basic | ✅ Full |
| Setup Complexity | 🟡 Medium | 🟢 Simple |
| Build Speed | 🔴 Slow | 🟢 Fast |
initPCF(pcfClass, options?)Simple initialization function for quick setup.
Parameters:
pcfClass: Your PCF component classoptions?: Optional configuration objectinitializePCFHarness(options)Advanced initialization with full configuration options.
Parameters:
options.pcfClass: Your PCF component classoptions.contextOptions?: Mock context configurationoptions.containerId?: Custom container element IDoptions.className?: Additional CSS classoptions.customContext?: Use custom context instead of mockcreateMockContext(options?)Creates a realistic mock PCF context.
Parameters:
options.controlId?: Custom control IDoptions.viewId?: Custom view IDoptions.displayName?: User display nameoptions.userName?: Usernameoptions.userId?: User IDoptions.datasetOptions?: Dataset configurationcreatePCFViteConfig(options?)Creates optimized Vite configuration for PCF development.
Parameters:
options.port?: Development server portoptions.dataverseUrl?: Dataverse URL (enables integration when provided)options.hmrPort?: HMR WebSocket portoptions.open?: Whether to open browser on server startoptions.viteConfig?: Additional Vite configurationThe library includes comprehensive TypeScript definitions for all interfaces and types.
Contributions are welcome! Please feel free to submit a Pull Request.
MIT License - see LICENSE file for details.
Found a bug or have a feature request? Please create an issue on GitHub.
The harness includes several built-in workarounds for common compatibility issues:
optimizeDeps: {
exclude: ['fsevents'] // Already included in base config
}
Issue: On macOS, fsevents (file system watching) contains native .node files that ESBuild cannot process, causing build errors.
Solution: The harness automatically excludes fsevents from Vite's dependency optimization. You can use the same pattern for other native modules:
// In your vite.config.ts if you encounter similar issues
viteConfig: {
optimizeDeps: {
exclude: ['another-native-module', 'problematic-package']
}
}
If you encounter peer dependency conflicts during installation, they are usually resolved automatically during the setup process.
FAQs
Modern Vite-based development harness for PowerApps Component Framework (PCF) with hot module replacement and PowerApps-like environment simulation
The npm package pcf-vite-harness receives a total of 68 weekly downloads. As such, pcf-vite-harness popularity was classified as not popular.
We found that pcf-vite-harness demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.