Fiddler, XrmToolBox, VS Code and VueJS: A fantastic combination
In this post I will show, very quickly, a set of tools and process that is working well for me while developing client side apps for Dynamics 365. This is just one way but some of the tools and how I use them should be something you can take away and implement in whatever you do for you development of Web Resources within the CRM.
A few years ago I remember coming across a great blog post from Scott Durow (@scottdurow), he of SparkleXRM and Ribbon Workbench fame, which introduced me to Fiddler2 autoresponders for replacing CRM web resources on the server with local development copies to vastly improve the development process and speed. I have used this ever since and you can see an archived version of this post here: https://community.dynamics.com/crm/b/develop1/archive/2014/04/15/fiddler2-the-tool-that-gives-you-superpowers-part-3.
In researching this post I found a number of other articles that link to this and also expand on it (some of those I found are linked below) but while he may not have been the first to use Fiddler for this purpose, his post was the first I found on the topic. With this article I hope to take that learning and expand a little on it to outline my current process for developing web resources as custom apps in the CRM (think the Time Entries screen and Schedule Board in Field Services and PSA). This is not a detailed post as I intend to further this in a series of posts over the coming weeks.
The tools I use for this:
- XrmToolBox: If you are working in Dynamics 365 in a technical role of any kind then you should be using this admin tool. Fact. In this article I am using the Web Resources Manager plugin.
- Fiddler: An excellent multi-purpose tool for debugging the web and developing anything that communicates with another machine. Like XrmToolBox, everyone should have this and I used it to troubleshoot the issue with the Schedule Board in my post: Field Services Schedule Board – Unknown Error.
The aim of the steps below is to show how I have setup my environment to develop a VueJS app for the CRM quickly and using a modern tool chain.
Create a VueJS app and build it, the output files look a little like the below:
Using the excellent Web Resources Manager in XrmToolBox you can create the right folder structure for the web resources in the CRM, this is quicker and easier to do here than in the CRM directly:
Update the web resources all at once by updating the files based on path as seen below, the trick is that your app web resources are named within a folder structure related to that app, holidays in this case. This really is a great feature as it allows you to update all files that match the same folder structure and naming in CRM from the local folder:
Setup Fiddler with a single autoresponder instead of individual rules for each file. In the image here you will see the first entry is the new RegEx rule used to replace all of the other rules here. This rule will match any file requested on the server in the path of WebResources/xt_/holidays/ and replaces the request with any local file in the matched path (dist). :
Navigate to the CRM to see your app in place:
A bit of a round-the-houses post but hopefully it is easy enough to follow to be useful but certainly the plan is to follow this up in a more detailed series of posts covering each step.
If you do like this then please share, comment, like or even just say hi.
Reference Posts of Note:
- https://develop1.net/public/post/2014/04/15/Fiddler2-The-tool-that-gives-you-Superpowers-Part-2: An update of the original post I remember.
- http://journeyintocrm.com/archives/862: Good post on Fiddler and how to setup.
- https://crmbusiness.wordpress.com/2014/09/23/getting-started-with-fiddler-and-crm/: More detail on Fiddler and setups.