Deploying a Custom PCF Control from GitHub to Dynamics 365 as an Unmanaged Solution

 Introduction:

This tutorial guides you through building and deploying a Power Apps Component Framework (PCF) control from GitHub source code (already saved to a local folder like C:\PCF\RepoName) into a Dynamics 365 (Dataverse) DEV environment. We'll use an unmanaged solution for easy edits or deletion. This method uses production builds to avoid issues like the 'eval()' security flag in the Solution Checker.

There are two main parts: (1) Quick Script Summary: A single script to copy-paste and run in your VS Code PowerShell terminal (customize variables at the top first). (2) Step-by-Step Introduction: A breakdown of the script, explaining each part for clarity.

Prerequisites: Ensure you have:

• Access to a Dynamics 365 (Dataverse) DEV environment with customization permissions.
• Node.js installed (version 16+ recommended; check with node -v. Download from https://nodejs.org). If compatibility issues arise during install or build, identify the right version from package.json (e.g., @types/node at ^10.12.18 suggests Node.js version 10). Use NVM to switch versions: If NVM isn't installed, follow https://www.hellosmart.ca/2024/02/how-to-download-and-install-node.html. Then run nvm list, nvm install 10, and nvm use 10 (replace 10 with your needed version).
• .NET SDK installed (version 8+; check with dotnet --version. Download from https://dotnet.microsoft.com/download/dotnet).
• Visual Studio Code (VS Code) installed (free from https://code.visualstudio.com) with the Power Platform Tools extension (install from VS Code extensions tab; restart VS Code).
• Power Platform CLI (pac) installed: Run npm install -g @microsoft/powerplatform-cli in PowerShell. Check with pac --version.
• PowerShell set to run scripts: Run Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser.

Install missing tools and restart VS Code/PowerShell before starting.

(1) Quick Script Summary (One Copy and Run for All)

Copy-paste this script into your VS Code PowerShell terminal. Customize the variables at the top first—these are the only changes needed. Then run it all at once.

# Customize these variables only—change values as needed; no other changes required
$envUrl = "https://your-dev-env-url"  # e.g., "https://helloxdev3.crm3.dynamics.com"
$publisherName = "YourPublisherName"  # e.g., "HELLOX"
$publisherPrefix = "yourprefix"  # e.g., "hx"
$solutionName = "YourSolutionName"  # Must be Name, not Display Name. e.g., "HelloXPCF"
$solutionVersion = "1.0.0.1"  # e.g., "1.0.0.1" (bump for updates)

cd C:\PCF\RepoName  # Replace with your actual PCF root path if different
npm ci

npm run build:prod  # Or your project's production build script; check package.json

rmdir _pcf -Recurse -Force -ErrorAction SilentlyContinue
mkdir _pcf 
cd _pcf
pac solution init --publisher-name $publisherName --publisher-prefix $publisherPrefix

# Automate uncomment and edit of cdsproj for Unmanaged in Release
$cdsproj = (Resolve-Path ".\_pcf.cdsproj").Path
$content = Get-Content $cdsproj -Raw
$replacement = @'
  <PropertyGroup>
    <SolutionPackageType>Unmanaged</SolutionPackageType>
    <SolutionPackageEnableLocalization>false</SolutionPackageEnableLocalization>
  </PropertyGroup>
'@
$content = $content -replace '<!--\s*<PropertyGroup>\s*<SolutionPackageType>Managed</SolutionPackageType>\s*<SolutionPackageEnableLocalization>false</SolutionPackageEnableLocalization>\s*</PropertyGroup>\s*-->', $replacement
Set-Content $cdsproj $content

# Modify Solution.xml (still from src for convenience)
cd .\src
$sol = (Resolve-Path ".\Other\Solution.xml").Path
[xml]$xml = Get-Content $sol
$man = $xml.ImportExportXml.SolutionManifest
$man.UniqueName = $solutionName
$man.Version    = $solutionVersion   # bump above whatever DEV shows now
$ln = $man.LocalizedNames.LocalizedName | Select-Object -First 1
if(-not $ln){ $ln = $xml.CreateElement('LocalizedName'); $ln.SetAttribute('languagecode','1033'); $man.LocalizedNames.AppendChild($ln) | Out-Null }
$xml.Save($sol)
cd ..

# Add reference to PCF project (path points to folder containing .pcfproj)
pac solution add-reference --path ..

# Restore and build the solution (this includes the PCF component, generates Customizations.xml, and packs unmanaged ZIP without eval)
dotnet restore
dotnet build /p:configuration=Release

# Auth and import (adjust URL if needed; use the generated unmanaged ZIP)
pac auth create --environment $envUrl --deviceCode
pac solution import --path bin\Release\_pcf.zip --environment $envUrl --publish-changes

(2) Step-by-Step Introduction of Above Script Summary

This section explains the script part by part. Use it to understand or debug. Run sections one by one if needed.

1. Customize Variables:
   • Variables like $envUrl hold your specific details. Edit them at the top only. This keeps the script flexible without changing other lines.
2. Navigate to PCF Root:
   • cd C:\PCF\RepoName: Goes to your PCF folder. Change the path if yours differs.
3. Install Dependencies:
   • npm ci: Installs exact dependencies from package-lock.json. If errors occur, check Node.js compatibility (see Prerequisites) and rerun after switching versions.
4. Build the PCF in Production Mode:
   • npm run build:prod: Builds an optimized bundle (check package.json for the script name). This prevents 'eval()' issues. Check output for no errors.
5. Create Solution Folder:
   • Deletes and recreates _pcf folder for a clean start.
   • Initializes the solution with your publisher details.
6. Configure for Unmanaged Packaging:
   • Edits _pcf.cdsproj to set unmanaged type. This ensures the ZIP is unmanaged. Verify the file after running.
7. Customize Solution.xml:
   • Sets solution name and version. (Description is optional and skipped here.)
8. Add PCF Reference:
   • Links the PCF to the solution.
9. Restore and Build Solution:
   • Restores packages and builds in Release mode. Creates unmanaged ZIP in bin\Release. Look for "Unmanaged Pack complete." in output.
10. Authenticate and Import:
    • Authenticates (follow prompts).
    • Imports the ZIP and publishes.

Verification and Next Steps:

• In make.powerapps.com (DEV environment): Solutions > Your solution (no lock icon) > Code components > Check your PCF.
• Run Solution Checker to confirm no issues.
• Add to form: Forms > Field > Controls > Add PCF > Publish.
• Test in Dynamics 365.
• For updates: Bump $solutionVersion and rerun.

Conclusion: This deploys PCF controls as unmanaged solutions without 'eval()' issues. For errors, check tools or Microsoft Docs. Use pac pcf push from your old guide for quick non-solution deploys, but in production mode.