The Issue
The issue and the workaround in this post applies to:
- Visual Studio 2013
- ASP.NET MVC using at least one TypeScript file
- Azure Website with git deploy
- Sites build and deployed before kudu issue 721 was resolved
Building a web site with ASP.NET and TypeScript targeting Azure Website I ran into an issue after I added the first TypeScript file and tried to deploy the web site using git deploy. It would fail with the following error message:
C:\DWASFiles\Sites\typescripttest\VirtualDirectory0\site\repository\TypeScriptHTMLApp1.csproj(67,3): error MSB4019: The imported project "D:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v11.0\TypeScript\Microsoft.TypeScript.targets" was not found. Confirm that the path in the declaration is correct, and that the file exists on disk.
The root cause for this is that the file Microsoft.TypeScript.targets file is not yet available using git deploy for Azure Websites.
The issue that I ran into is documented and discussed in a few places, e.g.
- https://github.com/projectkudu/kudu/issues/556
- https://github.com/projectkudu/kudu/issues/721
- http://stackoverflow.com/questions/14883496/is-there-a-way-to-run-the-typescript-compiler-as-part-of-the-azure-git-deploy
Here is my workaround that solved the issue for now. Rumors has it that Microsoft is working on a proper solution for the issue.
Note that the workaround does not require a custom “deploy.cmd” file which I felt was a plus despite having creating custom deploy scripts for other projects and other reasons.
The Workaround
The workaround is based on making the msbuild task and the TypeScript compiler available when the msbuild script (aka solution file and project files) are executed.
In my repository I created a folder 3rdparty in parallel to the solution file.
Next I created a subfolder typescript-sdk and copied the content of “C:\Program Files (x86)\Microsoft SDKs\TypeScript” into “3rdparty\typescript-sdk”. The folder contains a file tsc.exe. Make sure this is version 0.9.1.1. This version worked for me. Apparently there are other versions out there. For example version 0.9.5.0 is reported to create an error.
I also needed the msbuild task. For that I created a subfolder typescript-task and copied the content of “C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v12.0\TypeScript” into “3rdparty\typescript-task”.
The next two steps required editing the file “Microsoft.TypeScript.targets” located in “3rdparty/typescript-task” and the ASP.NET MVC project file. I won’t detail these changes here as all of this workaround is available in a repository.
With this workaround I have the same behavior for Azure Website’s git deploy as I have locally building from Visual Studio 2013. To use a TypeScript file, all I have to do is adding the file, reference the resulting javascript in the appropriate place in my views or layouts, commit and push. No further steps required.
Once the issue is resolved, all I have to do is undo the changes in the project file and remove the folders “3rdparty\typescript-sdk” and “3rdparty\typescript-task” and everything else is back to normal.
This workaround should also be applicable for scenarios where you already have a custom deploy script. The workaround does not require any changes to custom deploy scripts.
All of the source code is available in a sample project at https://bitbucket.org/ml_agileutilities/typescript-sample. There is a branch with a version that allows reproducing the problem. There is a second branch that demonstrates that the workaround fixes the issue. If you want to try out either scenario create an Azure Website and have it use git deploy from one the respective branch.
Credits
I’d like to thank Thiago Almeida and David Ebbo, Microsoft, for their awesome support in finding and testing this workaround.
Although I didn’t need a custom deploy script in the end, I would also like to thank Amit Apple for his very helpful description of how to create custom deploy script for Azure Websites.