cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Regular Visitor

pcf-scripts start hot reload

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?

 

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Super User
Super User

Re: pcf-scripts start hot reload

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.

View solution in original post

7 REPLIES 7
Highlighted
Regular Visitor

Re: pcf-scripts start hot reload

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

Highlighted
Regular Visitor

Re: pcf-scripts start hot reload

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

Highlighted
Super User
Super User

Re: pcf-scripts start hot reload

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? 

Highlighted
Regular Visitor

Re: pcf-scripts start hot reload

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

 

Highlighted
Super User
Super User

Re: pcf-scripts start hot reload

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.

View solution in original post

Highlighted
Regular Visitor

Re: pcf-scripts start hot reload

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

Highlighted
Regular Visitor

Re: pcf-scripts start hot reload

@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.

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

Watch Now

Experience what’s next for Power Apps

See the latest Power Apps innovations, updates, and demos from the Microsoft Business Applications Launch Event.

Power Platform ISV Studio

Power Platform ISV Studio

ISV Studio is designed to become the go-to Power Platform destination for ISV’s to monitor & manage published applications.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Users online (6,933)