Support Monorepo for multiple PCF controls?

[kalluu-ck]

Hello powerplatform experts,

My project has a lot of PCF controls, and they share the same utils code like executing Web API (custom action). So I intend to create a monorepo (with npm workspaces feature) for PCF controls and shared packages so that PCF controls can share the same utils code: https://github.com/kalluu-ck/pcf-monorepo/tree/main

The code structure is something like this:

node_modules
pcf
---pcfControlA
------package.json
---pcfControlB
------package.json
shared
---libA
------package.json

Currently, there are 2 errors with this setup:

• When I start the pcf control using npm start -w pcf-atoms-grid (pcf-atoms-grid is the PCF workspace), there is an error Cannot find module 'C:\DATA\pcf-monorepo\pcf\atoms-grid\node_modules\pcf-start\bin\pcf-start.js'
  I then do the workaround: go to the root node_modules\pcf-scripts\tasks\startTask.js line 34 and change the URL from node_modules/pcf-start/bin/pcf-start.js to ../../node_modules/pcf-start/bin/pcf-start.js. It works, the harness starts successfully.
• When I want to deploy the PCF control to Dataverse, I have another error C:\Users\ABC\.nuget\packages\microsoft.powerapps.msbuild.pcf\1.24.3\build\Microsoft.PowerApps.MSBuild.Pcf.targets(133,5): error MSB3375: The file "node_modules/pcf-scripts/package.json" does not exist.
  I then do another workaround: go to the Microsoft.PowerApps.MSBuild.Pcf.targets and adapt the node_modules path accordingly <_PcfScriptsPackageFile Include="../../node_modules/pcf-scripts/package.json" />.

So my question is, is there a supported way to configure the node_modules path in these 2 files?

Regards,
kal

[mtone]

I've been using a monorepo for PCFs using yarn v1 for a while. First you can use the the "nohoist" option to install a copy of some dependencies under each package rather than the root.

"workspaces": {
    "packages": [
      "pcf/*"
    ],
    "nohoist": [
      "**/pcf-scripts",
      "**/pcf-start",
      "**/@types/powerapps-component-framework"
    ]
  },

Another gotcha is that PCF scripts automatically runs "npm install" which is incorrect in a monorepo (either yarn or npm workspaces). I wish it didn't do that. A workaround is placing a npm.bat file in each package using this Stackoverflow solution to redirect to "yarn install" instead (put yarn %Args% as last line).

That will solve your 2 initial problems and let you build, test and push.

In my opinion the main issue is from making path assumptions instead of relying on node module resolution. There is already good support of TS project references and/or custom webpack.config.js so it's really not that far off implicitly supporting monorepos.

[janis-veinbergs]

There are properties to control build, like you can disable implicit npm install command by setting PcfEnableAutoNpmInstall to false.

    <PcfEnableAutoNpmInstall Condition=" '$(PcfEnableAutoNpmInstall)' == '' ">true</PcfEnableAutoNpmInstall>
    <PcfAlwaysNpmRunBuild Condition=" '$(PcfAlwaysNpmRunBuild)' == '' ">false</PcfAlwaysNpmRunBuild>
    <PcfAlwaysNpmInstall Condition=" '$(PcfAlwaysNpmInstall)' == '' ">false</PcfAlwaysNpmInstall>

To me it looks like PcfEnableAutoNpmInstall will not cause npm install if package.json is not modified. Wheras PcfAlwaysNpmInstall will do npm install regardless.

[mtone]

I was not aware of those - even better, thanks!

[Syntarex]

Hey! I'm new to PCF. Where to add this properties? I want to create a monorepo with pnpm and turborepo too. :)

[Syntarex]

I figured it out myself. :)

I put it on top of my .pcfproj-File:

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="15.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <PropertyGroup>
    <!-- Set default values for the custom properties if they are not already set -->
    <PcfEnableAutoNpmInstall Condition=" '$(PcfEnableAutoNpmInstall)' == '' ">false</PcfEnableAutoNpmInstall>
    <PcfAlwaysNpmRunBuild Condition=" '$(PcfAlwaysNpmRunBuild)' == '' ">false</PcfAlwaysNpmRunBuild>
    <PcfAlwaysNpmInstall Condition=" '$(PcfAlwaysNpmInstall)' == '' ">false</PcfAlwaysNpmInstall>
  </PropertyGroup>
 ...

[janis-veinbergs]

nohoist would be an option, but npm is only supported for PCF.
What I actually did was:

npm install --save-dev symlink-dir

And add this to package.json:

"postinstall": "symlink-dir ../../node_modules/pcf-scripts node_modules/pcf-scripts && symlink-dir ../../node_modules/pcf-start node_modules/pcf-start"