How to create a TypeScript project for Model Driven Apps

This is the continuation of a series on how to apply TypeScript in Model Driven Apps, In my previous blog post I’ve explained what TypeScript is, pros and cons and how it helps in Model Driven Apps, in this case I’m going to walk you trough on how to create a TypeScript project for Model Driven Apps.

Usually your TypeScript project will be in the same solution as your Plugins project, at least that is the way I like to have the code for all my projects, all under the same Visual Studio solution, so I will create first a Class Library (.NET framework) project with no code on it, and then I will create the TypeScript project.

Create a TypeScript project

First we will need to create a folder called WebResources in your preferred location, in my case I will create the main folder as MyProject and the subfolder as P365I.WebResources:

Next, you have to open Visual Studio, create a new Class Library (.NET framework) project, assuming this is your plugins project:

Choose the main folder you created earlier and click Create:

Then right click on the Solution node and select Add Exiting Web Site:

Choose the WebResources folder you created earlier:

You will get something like this:

That’s it, you’ve created a web resource project, but now you need to add some configuration files so that you can write TypeScript and it automatically compiles to JavaScript.

Adding Config files

Next you have to add a new item called “package.json” so right click on the WebResources project and add a new element:

Enter package.json as the name:

And now copy and paste the following content (Adjust where needed):

{

  “name”: “P365I.WebResources”,

  “version”: “1.0.0”,

  “description”: “”,

  “main”: “index.js”,

  “scripts”: {

    “build”:npm run compile”,

    “test”:echoError: no test specified” && exit 1

  },

  “author”: “”,

  “license”: “ISC”,

  “devDependencies”: {

    “@types/es6-promise”: “^3.3.0”,

    “@types/xrm”:9.0.67

  },

  “dependencies”: {

    “latest”: “^0.2.0”,

    “promise”: “^8.1.0
  }
}

Now you have to repeat the steps to add a new item, but this time the name of the item must be “packages.config”:

The content of this file is the following:

<?xml version=“1.0” encoding=“utf-8”?>

<packages>
  <package id=“Microsoft.CrmSdk.CoreTools” version=“9.1.0.25” targetFramework=“net40” />
  <package id=“spkl” version=“1.0.431” targetFramework=“net40” />
</packages>

Again, repeat the steps to add a new item, but this time the name of the item must be “tsconfig.json” with the following content:

{
  “compileOnSave”: true,
  “compilerOptions”: {
    “module”: “esnext”,
    “noImplicitAny”: true,
    “removeComments”: true,
    “preserveConstEnums”: true,
    “sourceMap”: true,
    “target”: “ES2017”,
    “outDir”: “dist”,
    “moduleResolution”: “node”,
    “esModuleInterop”: true,
    “declaration”: false,
    “rootDir”: “src”,
    “resolveJsonModule”: true,
    “allowSyntheticDefaultImports”: true,
    “strict”: true,
    “baseUrl”: “.”,
    “skipLibCheck”: true,
    “paths”: {
      “@common/*”: [
        “src/common/*”
      ]
    },
    “lib”: [
      “es6”,
      “DOM”,
      “ES2017”
    ]
  },
  “include”: [
    “src/**/*.ts”
  ],
  “exclude”: [
    “node_modules”,
    “dist”
  ],
  “typeRoots”: [
    “node_modules/@types”,
    “node_modules/promise”
  ]
}

Now you have to create two folders under the WebResource project, right click and add a new folder: