pcf-scripts start hot reload

(0) Share

Report

Posted on by nwood2009

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?

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (7)

Answers (1)

magesoe 80 on at

Like (2)

Report

Using the command "npm start watch" will launch the local PCF render with hot reload

Was this reply helpful? Yes No
nwood2009 10 on at

Like (0)

Report

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

Was this reply helpful? Yes No
ScottDurow 1,039 on at

Like (0)

Report

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?

Was this reply helpful? Yes No
nwood2009 10 on at

Like (0)

Report
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 ); }

Was this reply helpful? Yes No
Verified answer

ScottDurow 1,039 on at

Like (0)

Report

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.

Was this reply helpful? Yes No
nwood2009 10 on at

Like (0)

Report
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;

"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

Was this reply helpful? Yes No
nwood2009 10 on at

Like (0)

Report

@ScottDurow
Actually you were correct, this should work except I had added to my start script "-w"
in package.json I had:
"start": "pcf-scripts start -w"
Should have been just:
"start": "pcf-scripts start"

After making that change is watches as expected. Thanks again for your help.

Was this reply helpful? Yes No