Category Archives: Software development

Software development related posts.

How to run karma in TeamCity on Windows server

This is one solution and it works for us, there is also a node and npm plugin for TeamCity that I did not try, it is found here https://github.com/jonnyzzz/TeamCity.Node.

Setup nodejs, npm and karma for TeamCity on Windows server.

Install nodejs

Install nodejs for windows using the latest installer from https://nodejs.org/en/download/

Configure npm global

To be able to call karma and npm from TeamCity command line build step you need to
update the global catalogs for npm (as described in this post http://stackoverflow.com/questions/7300132/how-to-use-npm-with-node-exe/9366416#9366416)

Create the global (admin) location(s) for npm modules
“C:\ProgramData\npm-cache” – npm modules will go here
“C:\ProgramData\npm” – binary scripts for globally installed modules will go here
“C:\ProgramData\npm\node_modules” – globally installed modules will go here
And set the permissions appropriately
administrators: modify
authenticated users: read/execute

Run the following npm commands in a command prompt
npm config –global set prefix “C:\ProgramData\npm”
npm config –global set cache “C:\ProgramData\npm-cache”

Add npm and nodejs to your System’s Path environment variable

From the GUI, in “Control panel” search for “advanced system setings” open it and select “Environment variables” or run “sysdm.cpl” from cmd to open the “System Properties”
Add the following to PATH: “;C:\Program Files\nodejs\;C:\ProgramData\npm”

Install karma-cli in “C:\ProgramData\npm”

Run the command “npm install karma-cli -g” and verify that i is installed in Ā “C:\ProgramData\npm”

Install PhantomJs (Optional)

(phantomjs will be downloaded and installed in each build folder if it is not found locally)
Download the zip-file for Windows http://phantomjs.org/download.html
and extract to “C:\PhantomJs\bin\phantomjs” (create the path)

For npm to find phantomjs in a TeamCity build step,
add the path “C:\PhantomJs\bin\phantomjs\bin\phantomjs.exe” to a new environment variable PHANTOMJS_BIN (created in “Environment variables” )

Restart the TeamCity service just to be sure.
To run the karma tests

Save the TeamCity reporter in your project (read this http://karma-runner.github.io/0.13/plus/teamcity.html)
by running the command “npm i –save-dev karma-teamcity-reporter”

Add two command line build steps to your build.
first one containing the command “npm install” – to update/install your “node_modules”
and the second containing the command “karma start –reporters teamcity –single-run –browsers PhantomJS –colors false”

And now you should have a great karma šŸ˜‰

Happy building!
//Jimi

How to use Visual Studio 2015 with latest nodejs npm

Problem – Visual Studio uses an old version of npm

When running “npm install” using npm version 2 (npm2) the node_modules dependency graph can (will) cause the path/file tree to grow beyond the path length allowed in Windows.
One example of error messages that can hit you in VS is from the RazorGenerator.MSBuild “Illegal characters in path.”
I found that updating this from 2.2.6 to the latest 2.4.3 solved the particular problem in one project but lead to other problems in another project where other nuget packages needed to be updated due to the update of RazorGenerator.MSBuild

Solution – install the latest version of npm and make Visual Studio use it

node version 3 (npm3) has solved the problem with deep paths, https://docs.npmjs.com/how-npm-works/npm3, and therefore the simplest solution is to use this version in VS, I do not know why VS has not updated to this version but since it is a Windows developer tool aiming hard on the open source arena I am stumbled on why an important “fix” like this is not packaged in an update already.

How to

Install nodejs for windows

Using the latest installer from here https://nodejs.org/en/download/, it is as simple as point and click šŸ™‚

Upgrade npm to latest version

At the time of writing the nodejs installer uses an older npm version and thatĀ“s why you should update npm by using “npm-windows-upgrade” (more information can be found here https://www.npmjs.com/package/npm-windows-upgrade)

The short install instruction is
Start powershell as administrator
Run the command “Get-ExecutionPolicy” – to see what your base line setting is (probably Restricted)
Run the command “Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force” – to allow the upgrade
Run the command “npm install –global –production npm-windows-upgrade” to install the upgrader
Run the command “npm-windows-upgrade” to upgrade
and select the latest version by just hitting enter.

npm-windows-upgrade

And optionally run the command “Set-ExecutionPolicy Restricted -Scope CurrentUser -Force” – to set the policy back to the former setting, using the value from the first “Get-ExecutionPolicy” (probably Restricted).

Point Visual Studio to the latest npm version

Add the nodejs path to Visual Studio to use the latest npm (thanks to mr James for pointing it out, http://jameschambers.com/2015/09/upgrading-npm-in-visual-studio-2015/)

In Visual Studio quick search find “External Web Tools”
and Add a new tools location path where the path points to the nodejs folder from the first step, “C:\Program Files\nodejs” or “C:\Program Files (x86)\nodejs” unless you made any changes, and move the location to the top.

VS-ExternalWebTools

Restart VS (not sure if it is needed but itĀ“s probably best anyway)

If you have a project with a current node_modules folder created before the npm upgrade, then delete the node_modules folder before you open the project in VS to avoid annoying errors.

And now the VS build should work.
If you already had a node_modules folder you can see that the new folder has a lot more sub folders, because more of the dependencies are installed in the “root” now.

Happy coding!
//Jimi

Localhost backend debugging from android device in visual studio, a beginners mistake

cordova azure api debugging on localhost throws error “Failed to load resource: net::ERR_CONNECTION_REFUSED”

Summary:
No! your phone will not connect to your computer through the usb when debugging from Visual Studio using the “device” option.

Scenario: A simple getting started Cordova app with azure backend. Using Visual Studio 2015 and Visual Studio Tools for Apache Cordova. https://azure.microsoft.com/sv-se/documentation/articles/app-service-mobile-cordova-get-started/

Adding push notifications. https://azure.microsoft.com/sv-se/documentation/articles/app-service-mobile-cordova-get-started-push/

Story:

I have been banging my head for a couple of days and cold not figure out what was wrong. When connecting to my backend in Azure the app was working correct, but not when running locally for debugging.

When searching www.stackoverflow.com and googling for the error I got “Failed to load resource: net::ERR_CONNECTION_REFUSED” I got lured away into believing this was related to Cross-origin resource sharing (CORS).

Continue reading Localhost backend debugging from android device in visual studio, a beginners mistake

How to configure chutzpah paths to find the files in a different project than your test project

Why I wrote this post? Well.. I hope to save a couple of hours for you my friend šŸ˜‰

IĀ“m using Visual studio 2013 and the chutzpah plugin with jasmine to test my angularjs code and I struggled for hours to get the tests running in the Test Explorer, it all turned out to be a problem with getting the references correct.

How to configure chutzpah paths to find the files in a different project than your test project.

It took some effort for me to find out, the documentation in the links below for how to configure the paths is not realy showing exactly how to (or I couldnĀ“t find it), so I want to share my solution.

http://chutzpah.codeplex.com/wikipage?title=Chutzpah.json%20Settings%20File
http://chutzpah.codeplex.com/wikipage?title=Chutzpah%20File%20References&referringTitle=Documentation
https://github.com/mmanela/chutzpah/wiki/Tests-setting

Prerequisites (if you use Visual Studio)

  1. Visual studio (2013)
  2. Node.js (Windows installer) –
  3. Chutzpah Test Adapter and Runner installed (download the files and let visual studio run them for installation)
    Chutzpah Test Adapter for Visual Studio
    Chutzpah Test Runner Context Menu for Visual Studio
  4. Jasmine.js installed in the test project (preferably via package-manager (Install-Package JasmineTest))
  5. A Solution with at least two projects (of which one is for tests)
    In my case “messageboard” and “messageboard.tests” from the Pluralsight course ā€œBuilding a Site with Bootstrap, AngularJS, ASP.NET, EF and Azureā€
    messageboard-project-folders

Since IĀ“m a bit lazy and donā€™t want to write to much code I use the _references.js file from my application project in the testfiles (I know this might not be the best way to do and wouldnĀ“t do it in production)

Do read these articles for the story behind _references.js and how it works in VS 2013, they are short and valuable. http://madskristensen.net/post/the-story-behind-_referencesjs and http://blogs.msdn.com/b/microsoft_press/archive/2013/11/07/from-the-mvps-script-references-in-visual-studio-2013.aspx

 

First; a working solution without chutzpah.json

Here are the paths included in the clienttests/testfile.js
And the tests run when no chutzpah.json file is configured
/// <reference path=”../scripts/jasmine.js” />
/// <reference path=”../../messageboard/scripts/_references.js” />
/// <reference path=”../../messageboard/js/home-index.js” />

(Note that the path to jasmine.js is NOT needed in the chutzpah.json configuration file)

 

Next; trying to use the chutzpah configuration

when trying to include the _referenses.js in chutzpah.json I couldnĀ“t make it work.
I tried to move the json file around to different folders and also set the ā€œRootReferencePathModeā€ with no result

This configuration doesnĀ“t work
{
“Framework”: “jasmine”,
“RootReferencePathMode”:”SettingsFileDirectory”,
“References”: [
{ “Path”: “../messageboard/scripts” , “Include”: “_references.js”},
{ “Path”: “../messageboard/js”, “Include”: “*.js” }
],
“Tests”: [
{
“Path”: “clienttests”
}
]
}

And gives the following error (which means that angular.js or angular-mock.js is not loaded):

ReferenceError: module is not defined
at Suite.<anonymous> …

This doesnĀ“t work either (and gives the same error)

“References”: [
{ “Path”: “../messageboard/scripts/_references.js”},
{ “Path”: “../messageboard/js/home-index.js” }
]

my messageboard/scripts/_references.js looks like this
/// <reference path=”angular.js” />
/// <reference path=”angular-route.js” />
/// <reference path=”angular-mocks.js” />

so I thought it might be something with the paths not being interpreted correctly, but when I tried to do like this it didnĀ“t work either so I reverted.
/// <reference path=”../messageboard/scripts/angular.js” />
/// <reference path=”../messageboard/scripts/angular-route.js” />
/// <reference path=”../messageboard/scripts/angular-mocks.js” />

And I ended up with the references to the real files instead (perhaps the best way to do it?), and I put the chtuzpah.json file in the root of my test project.

A working configuration

This configuration work (note that it also works without the RootReferencePathMode when the chtuzpah.json file is in the root)

{
“RootReferencePathMode”:”SettingsFileDirectory”,
“Framework”: “jasmine”,
“References”: [
{ “Path”: “../messageboard/scripts/angular.js”},
{ “Path”: “../messageboard/scripts/angular-route.js”},
{ “Path”: “../messageboard/scripts/angular-mocks.js”},
{ “Path”: “../messageboard/js/home-index.js” }
],

“Tests”: [
{ “Path”: “clienttests” }
]
}