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:

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.

Why do I need to update/expand on this previous post? If you have ever looked into modern client side web development then you will see that almost without exception there is a build chain in place now that takes your source and compiles/transpiles it into something a browser can understand and improves the code in ways that are just not practical to do by hand. The result is often a number of output files (bundled javascript for the app and vendors, css files, images, etc) which is great except if you want to use Fiddler autoresponders to serve these up for you in the CRM. My current javascript framework of choice is VueJS due to the easy with which it can be picked up and implemented and also the size and performance of it. The result of the standard build step for Vue is 9 files and I really don't like the idea of setting up each EXACT rule individually for Fiddler. The trick is that Fiddler accepts Regular Expressions for both the match AND the files which means I can now use a single rule to replace ALL files in a path.

The tools I use for this:

  1. Visual Studio Code: This is an open source IDE/Editor from Microsoft based on the fantastic Atom editor. It is my editor of choice for anything javascript.
  2. 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.
  3. 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.
  4. VueJS: Not really a tool but has a CLI (Command Line Interface) build tool that transpiles your app for you. VueJS is a javascript framework to build apps with.

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.

  1. Create a VueJS app and build it, the output files look a little like the below: Visual Studio Code file output

  2. 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: Web Resources Manager

  3. 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:

    Web Resources Manager

    Web Resources Manager

  4. 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). :

    Fiddler AutoResponders

    Fiddler AutoResponders

  5. Navigate to the CRM to see your app in place:

The custom application embedded in the Dynamics 365 interface.

The custom application embedded in the Dynamics 365 interface.

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:

  1. An update of the original post I remember.
  2. Good post on Fiddler and how to setup.
  3. More detail on Fiddler and setups.
Discuss on Twitter
Share on: