You’re offline. This is a read only version of the page.
10
Hi All
I have built a few PCF components with React and Typescript.
Usually to debug the component I run the script "pcf-scripts start"
Normally with React components you can create file watcher or create a hot reload of various sorts so that when a file is changed it auto rebuilds and restarts the browser.
I cannot find any examples of how to achieve this with pcf-scripts. Can anyone help me out here?
Actually you were correct, this should work except I had added to my start script "-w"
in package.json I had:
Thanks @ScottDurow
Here is the output of the "npm start watch", I have highlighted where it lists the MainGrid.tsx file there.
Also here is the script section of the package.json just in case there may be something that I have done wrong there;
Share
Report
All responses (
Answers (
"scripts": {
"storybook": "start-storybook",
"lint": "eslint --ext .jsx,.js src/",
"test": "npx jest --verbose ./test",
"test:update": "npx jest --updateSnapshot --verbose ./test",
"test:output": "npx jest --verbose ./test --json --outputFile=./test/__results__/.jest-test-results.json",
"doc": "jsdoc -c jsdoc.json",
"//PCF": "*****************************************************************",
"build": "pcf-scripts build",
"clean": "pcf-scripts clean",
"rebuild": "pcf-scripts rebuild",
"start": "pcf-scripts start -w"
},
> pcf-scripts start -w "watch"
[9:17:54] [start] Initializing...
[9:17:54] [start] Validating manifest...
[9:17:54] [start] Validating control...
[9:17:57] [start] Generating manifest types...
[9:17:57] [start] Compiling and bundling control...
[BABEL] Note: The code generator has deoptimised the styling of C:\Dev\CL\PowerApps\PCFComponents\PLALoanProductsEntry\node_modules\react-dom\cjs\react-dom.development.js as it exceeds the max of 500KB.
[Webpack stats]:
Hash: 347782d66c00752680c4
Version: webpack 4.42.1
Time: 25722ms
Built at: 24/09/2020 9:18:23 am
Asset Size Chunks Chunk Names
bundle.js 4.57 MiB main [emitted] main
Entrypoint main = bundle.js
[./PLALoanProductsEntry/MainServiceProvider.ts] 374 bytes {main} [built]
[./PLALoanProductsEntry/Models/PLAData.tsx] 151 bytes {main} [built]
[./PLALoanProductsEntry/Models/PLALoanInventory.ts] 187 bytes {main} [built]
[./PLALoanProductsEntry/Services/ServiceProviderBase.ts] 971 bytes {main} [built]
[./PLALoanProductsEntry/ViewModels/MainVM.ts] 11.4 KiB {main} [built]
[./PLALoanProductsEntry/Views/MainGrid.tsx] 8.12 KiB {main} [built]
[./PLALoanProductsEntry/Views/MainGridCommandCells.tsx] 783 bytes {main} [built]
[./PLALoanProductsEntry/index.ts] 4.5 KiB {main} [built]
[./PLALoanProductsEntry/testdata/plaProducts.json] 1.28 KiB {main} [built]
[./PLALoanProductsEntry/testdata/plaProductsInit.json] 25 bytes {main} [built]
[./node_modules/@emotion/core/dist/core.browser.esm.js] 10.7 KiB {main} [built]
[./node_modules/@progress/kendo-data-query/dist/es/main.js] 816 bytes {main} [built]
[./node_modules/@progress/kendo-react-buttons/dist/es/main.js] 780 bytes {main} [built]
[./node_modules/react-dom/index.js] 1.32 KiB {main} [built]
[./node_modules/react/index.js] 189 bytes {main} [built]
+ 677 hidden modules
[9:18:24] [start] Generating build outputs...
[9:18:24] [start] Starting control harness...
Starting control harness...
Mapping / to "C:\Dev\CL\PowerApps\PCFComponents\PLALoanProductsEntry\node_modules\pcf-start"
Serving "C:\Dev\CL\PowerApps\PCFComponents\PLALoanProductsEntry\out\controls\PLALoanProductsEntry" at http://127.0.0.1:8181
Ready for changes
That looks fine - there isn't anything that defines the watch directories other than the index.ts entry point.
After running npm start watch - what do you see in the output at the terminal? You should see a list of each ts and tsx that has been built and watched.
You also might want to do a 'npm update' for good measure to make sure you have the latest pcf scripts.
Hi @ScottDurow
Below is the relevant updateView section of the code in index.ts that references the MainGrid.tsx file that I was testing changes against. there is nothing that I am missing regarding referencing the tsx files in the project to add implicit watching or specifiy expecit files or directories to watch?
public updateView(context: ComponentFramework.Context<IInputs>): void {
this._entityTypeName = (context as any).mode.contextInfo.entityTypeName;
this._entityId = (context as any).mode.contextInfo.entityId;
let avHeight: number = context.mode.allocatedHeight;
this._vm._availableHeight = avHeight;
if (context.updatedProperties && context.updatedProperties.length > 0) {
this._controlContextService
.onPCFUpdate(context, context.updatedProperties)
.then(() => {
this.renderControl();
});
} else {
this.renderControl();
}
}
/**
* It is called by the framework prior to a control receiving new data.
* @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
*/
public getOutputs(): IOutputs {
return {};
}
/**
* Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
* i.e. cancelling any pending remote calls, removing listeners, etc.
*/
public destroy(): void {
ReactDOM.unmountComponentAtNode(this._container);
}
private renderControl() {
ReactDOM.render(
React.createElement(
MainGrid,
{ vm: this._vm, entityID: this._entityId, debug: true },
{ context: this._context }
),
this._container
);
}
That's unusual - npm start watch is designed to detect changes in ts and tsx files used by your contorl.
Are you sure that the tsx files are referenced by the index.ts? Due to tree shaking it could be that the tsx you are changing is not being watched?
Thanks @Magesoe
Using the command "npm start watch" does not seem to automatically detect saved changes to tsx files. I still have to manually run "npm run build", then "npm start watch" detects the changes in the built jsx files but does not auto refresh the browser
#1
WarrenBelz
94
Most Valuable Professional
#2
Michael E. Gernaey
72
Super User 2025 Season 1
#3
mmbr1606
71
Super User 2025 Season 1
