Detailed Guide on How to Use TypeScript with Dynamics 365 - Part 2: Deploying TypeScript into Dynamics 365

TypeScript is a typed superset of JavaScript that compiles into JavaScript. TypeScript has several benefits including easier OOP methodology, common errors spotting at compile time, support for new ECMAScript standards, etc.

As a Dynamics 365 Developer, it is quite exciting to use TypeScript within the system. By default, Dynamics don’t support TypeScript. Let’s see how we can sidestep this. previous post, we've seen how to set up the environment. Now we'll take a look at how we can actually deploy our code to Dynamics 365.

There are a couple of ways to deploy TypeScript into Dynamics 365. One of the ways is using spkl. Right Click on the project and select Manage NuGet Packages. Type spkl in the Browse window and click Install.

After the installation is complete several folders will be added to your solution. spkl is not only web resource deployment tool. It has some additional features like plugin deployment, early bound class generations, etc., so it has some files that have no use to us and we can get rid of them. App Code folder contains files for plugin registration and is not relevant for web resources, so we can delete it. For more information on spkl check the GitHub page here.

The main file we'll dive into is the one called spkl.json. There are quite a few lines of code in there but we need to keep only webresources property part. Delete everything else, because it’s not related to web resources. In the end, you should have something like this.

{
  "webresources": [
    {
      /* 
      Option - profile - Provide a comma delimitered list of profile names that can be referenced when calling spkl
      */
      "profile": "default,debug",

      /*
      Optional - root - Provide the relatative path of the webresources.
      */
      "root": "Webresources/",

      /*
      Optional - solution - Add webresources to a solution when deploying
      */
      "solution": "<SolutionUniqueName>",

      /*
      Required - files - List the webresources to deploy relatative to the root of this file (or the the root parameter above)
      */
      "files": [
        {
          "uniquename": "new_/js/somefile.js",
          "file": "new_\\js\\somefile.js",
          "description": ""
        }
      ]
    }
  ]
}

The root property indicates where is the root of your TypeScript files. In this case, it should be blank. The Solution property indicates the Display Name of the solution where the actual JavaScript file will be stored. For example solution with Display Name TypeScript.

With the *files *property, we describe which web resources we need to add into Dynamics 365. In the *uniquename *property provide a full name for your web resource including a prefix. The file property indicates where the actual file in our project is stored. In this case, we should have something like this.

{
  "webresources": [
    {
      /* 
      Option - profile - Provide a comma delimitered list of profile names that can be referenced when calling spkl
      */
      "profile": "default,debug",

      /*
      Optional - root - Provide the relatative path of the webresources.
      */
      "root": "",

      /*
      Optional - solution - Add webresources to a solution when deploying
      */
      "solution": "TypeScript",

      /*
      Required - files - List the webresources to deploy relatative to the root of this file (or the the root parameter above)
      */
      "files": [
        {
          "uniquename": "zvt_/js/Account.js",
          "file": "js\\Account.js",
          "description": ""
        }
      ]
    }
  ]
}

The spkl package also added *spkl *folder with few batch script files. We need the one called deploy.webresources.bat. Open the command prompt, navigate to the project root directory and execute the batch script file by simply typing .\deploy-webresources.bat.

After providing information regarding the Dynamics 365 organization and your user credentials, web resource will be uploaded to the instance.

Now you can use this JavaScript web resource anywhere in the system and execute the functions within it. In the next part, we will see how we can debug our code directly in the browser, which is a very important topic. Stay tuned! :)