Sunday, September 15, 2013

TypeScript on your Build Server

Last week I wrote about making your TypeScript files compile on save by updating your project files. It is an easy update to make, but then what happens when you check into source control? You are probably going to get an error because your build server can not resolve Microsoft.TypeScript.targets

Two ways to make TypeScript compile on your build server

  1. You can install TypeScript on your build server.

The big problem with this solution is that it means you have to install a specific version of TypeScript on your build server, and thus make all of your project depend on that single version.

  1. You can check the TypeScript compiler into Source Control.

This may seem like an odd solution, but for right now I feel that it is the best way to go. It allows all of your projects to be independent of each other, and you do not need to install anything new on any of your servers. (This solution has been proposed to the TypeScript team; thanks, josundt!)

How to Add TypeScript to Source Control

This may look like a lot of steps, but do not worry! All of these steps are small, simple, and they will only take you a minute or two. :)

  1. Create a TypeScript folder in the root of your solution folder.
  2. Create a SDKs folder inside of the TypeScript folder.
  3. Create a MSBuild folder inside of the TypeScript folder.
  4. Copy the contents of your TypeScript SDKs install (where the TypeScript compiler, tsc.exe, is located) to the TypeScript\SDKs folder that you have created.
    • By default, that will be located at:
      C:\Program Files (x86)\Microsoft SDKs\TypeScript
  5. Copy the contents of your TypeScript MSBuild folder (where your TypeScript target files are located) to the TypeScript\MSBuild folder that you have created.
    • By default, for Visual Studio 2012, that will be located at:
      C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v11.0\TypeScript
  6. Edit TypeScripts\MSBuild\Microsoft.TypeScript.targets to make the TscToolPath point to your local SDKs folder.
    • The original path would be:
      <TscToolPath Condition="'$(TscToolPath)' == ''">$(MSBuildProgramFiles32)\Microsoft SDKs\TypeScript</TscToolPath>
    • The new path should be:
      <TscToolPath Condition="'$(TscToolPath)' == ''">..\TypeScript\SDKs</TscToolPath>
  7. Open your project file for editing.
  8. Update your TypeScript project import to follow a relative path to the local folder.
    • The original path would be:
      <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" />
    • The new path should be:
      <Import Project="..\TypeScript\MSBuild\Microsoft.TypeScript.targets" />
  9. You're done! Reload your project and test it out; if that works, check it in.
Shout it

Enjoy,
Tom

4 comments:

  1. Hi, Tom. Thanks for this -- this makes a great deal of sense, and I'm checking in v0.9.5 into source control now ;)

    One possible simplification to the process is around step 6, modifying the .targets file. Don't set the TscToolPath here, but instead do it in the .csproj file in step 8, and include a new PropertyGroup with a single TscToolPath element.

    The .targets file only sets TscToolPath if it's currently unset, so setting it in the CSPROJ file means that, when you come to upgrade the compiler version, you shouldn't have as many edits to do.

    I've created a gist of the MSBUILD fragment;

    https://gist.github.com/stevecooperorg/9133861

    ReplyDelete
  2. Hello,

    I also had to add the tag TypeScriptToolsVersion in my csproj. Otherwise the hosted build controller on visual studio online complained about a wrong TypeScript compiler.

    ReplyDelete
  3. Thanks for this, was helpful, been trying to sort out BundleTransformer to compile ts on the fly but this is a good stopgap

    ReplyDelete
    Replies
    1. My next post will be about using TypeScript with the BundleTransformer, so stay tuned!

      Delete

Real Time Web Analytics