In the previous post, I provided step-by-instructions on how to start developing HtmlWebResources using create-react-app. In this, I will share one more tip I got from Chris Groh that can speed up the development/testing process even greater.

If you built React apps using create-react-app or PCF control and tested it using “npm start watch” you may know the term “hot reload”. If you’re not aware of this term it means – an automatical reflection of changes performed in code in the running instance of the application. Here is what “hot reload” looks like when it works within create-react-app and VSCode:

Scenario

I continue working on the application I built in my previous post. The application was deployed to Dataverse with the relative path “ab_/ABCustomDialog/index.html”:

During the development, I, as a developer, want to see all changes performed in VS inside Dataverse, and using the following steps it’s doable.

Changes in VS project

Add the file with the name .env.development to the project and add the following content to it:

Update the first line according to the virtual folder used by your application and leave lines 2-4 untouched.

Fiddler

Configure Fiddler’s autoresponder the following way:

Here is the text representation of settings:

and

Replace “yuorcrminstance.crm.dynamics.com” with your instance base URL and “ab_/ABCustomDialog” with the virtual folder used by your Html WebResource.

Doublecheck that the “Accept all CONNECTs” checkbox is unchecked – this approach won’t work with the checkbox checked.

Testing

Start the fiddler (in some cases it’s required to run it “As Administrator” mode).

Switch to VS Code and run the “npm start” command.

Switch to Dataverse and refresh the application.

Perform the change in VS Code. If everything was configured the right way changes should be immediately reflected in Dataverse: