CategoryVisual Studio

Running gulp tasks on a buildserver

With the newest ASP.NET release coming, Microsoft is removing their own optimization framework and pushes developers to use Gulp, NPM and Bower.
I do not want to manually minify and bundle my css and js files, so I want a Gulp task to do it.
My NPM file (package.json) looks like:

{
  "version": "1.0.0",
  "name": "ASP.NET",
  "private": true,
  "devDependencies": {
    "bower": "1.7.7",
    "gulp": "3.9.1",
    ....
  }
}

My bower file (bower.json) looks like

{
  "name": "ASP.NET",
  "private": true,
  "dependencies": {
    "jquery": "2.2.3",
    "jquery-validation-unobtrusive": "3.2.6",
    "bootstrap": "3.3.6",
    ....
  }
}

I also do not want my bundles to be source controlled.
It is a task of the buildserver to prepare my solution for release.
This means that the buildserver should be able to run the same Gulp tasks as we do in our development environment.

The following software should be installed on the buildserver to let the buildserver run Gulp tasks:

When installing Git, set install option to “Run GIT from the Windows Command Prompt”.
I’d like to have all my configuration source controlled, so I create a targets file which contains the targets for running Npm, Gulp and Bower and I import this file in my web project.

  <!-- Gulp -->
  <Target Name="RunGulpTask" AfterTargets="BowerInstall" Condition="'$(RunGulpTasks)' != ''">
    <Message Text="Running gulp task 'default'" Importance="high" />
    <Exec Command="node_modules\.bin\gulp" WorkingDirectory="$(ProjectDir)" />
  </Target>

  <!--Bower -->
  <Target Name="BowerInstall" AfterTargets="NpmInstall" Condition="'$(RunGulpTasks)' != ''">
    <Message Text="Running bower install" Importance="high"/>
    <Exec Command="node_modules\.bin\bower install" WorkingDirectory="$(ProjectDir)" />
  </Target>

  <!--Npm -->
  <Target Name="NpmInstall" BeforeTargets="BeforeBuild" Condition="'$(RunGulpTasks)' != ''">
    <Message Text="Running npm install" Importance="high"/>
    <Exec Command="npm install" WorkingDirectory="$(ProjectDir)" />
  </Target>

I do not want these tasks to run in my development environment (because the TaskRunner of Visual Studio takes care of it), so I added a RunGulpTask parameter. When this is provided (by adding /p:RunGulpTask=true to the msbuild command), the targets will be run before the solution is built.

My gulpfile.js looks like:

var gulp = require('gulp'),
.....
gulp.task('default', ['bundleCss', 'minCss', 'bundleJs', 'minJs'], function() {});

I did not provide a Gulp task to run, so Gulp will run the default task by convention. My default task has a dependency to all tasks I want to be run on the buildserver.
The buildserver now bundles and minifies my css and js files by using the same Gulp tasks.

JavaScript unit tests and Visual Studio

Although all my code is always completely bug free (I love sarcasm), I’m still a big fan of unit tests.
As logic moves from server-side to client-side, I’m very happy to see that unit testing for client-side code is getting better supported and more common these days.

Jasmine

Jasmine is a behavior-driven JavaScript testing framework. It allows you to test your client-side code.
It has a clear and easy to understand syntax and is very popular in the community. Even Angular, which is designed with testing in mind, uses Jasmine and has tons of Jasmine examples on their website.

Example

In the example below I have a very simple math function, named multiply. This function is stored in math.js and it accepts two arguments, it should multiply argument 1 by argument 2.

function multiply(a, b)
{
    return a * b;
}

The test below makes sure that the the multiply function works as expected.

/// <reference path="math.js" />

describe('multiply', function () {
    it('multiplies a by b', function () {
        var a = 2;
        var b = 4;
        var result = multiply(2, 4);
        expect(result).toEqual(8);
    });
});

It requires math.js to be loaded. Make sure you reference all required files needed to run the test.
Of course one test is not enough to prove this function is completely bug free, but this is just an example. Normally I would write tests for all edge cases to make sure it handles everything as expected.

Visual Studio

My IDE is Visual Studio and I also use it for all my client-side code (I’m experimenting with TypeScript and enjoying it a lot).
Resharper, one of my most important Visual Studio extensions, does support client-side unit testing, but I do not have a Resharper license for at home, so I was searching for a different solution, until I found Chutzpah.

This Visual Studio extensions adds JavaScript unit testing support and integration with the Visual Studio test runner.
It combines server-side unit tests and client-side unit tests.

The result is as follows:
client-side-test-runner

Pretty sweet!

Setting up Git source control on a QNAP NAS

When I start a new project, the first thing I do is set up source control. Source control is key!
I know all my source code is safe and when I make mistakes I can easily do a rollback.

So why not take it serious and use Git?
GitHub is great, but it is not free when using private repositories. Tho I’m a big fan of open source, not all my projects are open source.

So I wanted to configure Git on my NAS, an old QNAP TS-410 (currently running on firmware 4.2.0).
This is how I configured Git for a QNAP NAS.

Install Git

First of all, install the QNAP package from the app center (currently version 2.1.0) and make sure it is turned on.

There seems to be something wrong with the QNAP Git package, because a manual action is required.
open a ssh connection to your NAS.

If you’re not familiar with ssh, you can download a client (f.e. putty) and open a new connection by entering the IP of your NAS.

now login with your admin account and enter the following command:


#  cd /usr/bin
#  ln -s /Apps/git/bin/git-upload-pack
#  ln -s /Apps/git/bin/git-receive-pack

This fixes an issue with the git-upload-pack and git-receive-pack not being found.

Hosting your repositories

Next, create a new share for your repositories.
I created a new share named ‘git’, but you’re free to choose.

Again, open an ssh connection and go to the just created share:

#  cd /share/MD0_DATA/git

if this does not work, the MD0_DATA folder is probably different. go to the /share folder and check the folder name with the following command:

#  ls -la

This will show a full list of all items and you can figure out what the right name is.

in the ‘git’ folder, enter the following command to create a new repository:

git init --bare NameOfMyRepository

This creates a new repository with the name ‘NameOfMyRepository’. It will automatically create a new subfolder with an identical name.

Cloning the repository

On your development machine, open your git tool and go to the directory where you want to work.
Now enter the following command:

git clone admin@YourIP:/share/git/NameOfMyRepository

This will ask for the admin’s password.
You can also use auto login by generating a ssh keyfile, but I do not want that for security reasons.

Once entered, the repository is cloned in a folder named ‘NameOfMyRepository’ and you’re good to go!

The Git controls integrated in VS2015 do not work with ssh yet, but the guys are working on it. You can read about it here

Creating native iOS and Android apps in Visual Studio using C#

Lets go Mobile!

One of my interests in software development is in mobile devices, websites and applications. I have blogged about it in several topics. But this was all about mobile websites and optimizing your website for mobile devices.

In my search for new and interesting things, I ended up with an idea to develop a native app. Because I don’t own any apple device (proud of that!), I wanted to develop a native Android application.

A good starting point for creating Android apps is, of course, the Android docs. But there is one disadvantage, it is Java. I don’t really hate Java, but it is just not for me. I don’t have an IDE set up for Java, I don’t know the language as well as c#, so I didn’t really feel like working with c#.

Xamarin

That is when I found Xamarin. It was actually Scott Hanselman who blogged about it. If you don’t know who Scott Hanselman is, please read his blog! Even better, if you have the change, go and see him when he is speaking.

Xamarin lets you develop native apps in Visual Studio using c#. Everything is strongly typed and works how you expect it to work. The debugger starts the Android emulator and lets you easily test your application.

Just one bad thing about Xamarin, the pricing! It is very expensive, but you can download a 30 day trial.

Setting up your environment

Before you can use Xamarin, you need to set up your environment. I assume you already have Visual Studio installed.

To start using Xamarin, you need to install the following:

First install the Java JDK.  In my case I needed to updated the PATH environment variable (Control Panel -> System -> Advanced System Settings -> Environment Variables) and add the bin folder to this variable. In my case C:\Program Files\Java\jdk1.7.0_51\bin.

After that, unzip theAndroid SDK to a location of choice. Run the SDK Manager as administrator. And install all desired packages.
The installed APIs can be selected from within Visual Studio in the Project Properties.

Now this is done, we can install Xamarin. When this the installation is completed, start Visual Studio and configure it. Go to tools -> options and select Xamarin. In the Android Settings tab Select the Android SDK location. And that’s it. Ready to go!

Project Settings

When you open Visual Studio and select new project, you will find a new option in templates, Android. By selecting this option, you will find several Android applications. Most of it just change the API level.

This can simply be changed in the properties window of the Project.

android-properties
Updating the “Minimum Android to target” property will change the targetted API level. My suggestion: keep the API level as low as possible.  This enhances accesibility.

The Xamarin docs are a good place to start. They have a lot of good tutorials to get started. In my next posts, I will post about native apps and code!

Creating and maintaining minified files in Visual Studio 2012 (with Web essentials)

Web essentials brings a lot of cool features to Visual Studio. It is a creation of Mads Kristensen. Many of these features will be added to Visual Studio in future releases and Web Essentials is downloadable as nuget package.
One of the cool features of Web Essentials is minification and bundling.
When you right click on a js file, Web essential adds an option to the context menu called “Minify Javascript file(s)”.
This creates two files, one minified file (adds min.js to the original filename) and a map file (adds min.js.map to the original filename).
Map files can be used to make the minified file readable and debuggable. The creation of a map file can be enabled or disabled in Tools > Options.

But now the coolest feature, when you make changes to the original javascript file, the minified file gets updated automatically.

I use this features a lot for my javacript plugins (see http://www.vicreative.nl/Projects). I work in the original files, the minified files are updated automatically and I commit them all in Git.

When selecting more than one file, the option “Create Javascript bundle file” gets enabled. This creates the following files:

  • a bundle file, an xml file containing all filenames for this bundle.
  • a javascript file
  • a minified javascript file
  • a map file

The same features also work for CSS files, but no map is created because this is not necessary for css files.

Creating bundles can also be done automatically, read this post.

Update:
The bundling and minification has moved from Web essentials to a different NuGet package: Bundler & Minifier

Opening VS 2012 Web projects in VS 2010

Have you ever met a front end developer who doesn’t mind working in Visual Studio? Well, I’m one of the lucky ones who have!
He doesn’t even own an iPhone and still his work is pretty awesome! (no, he did not pay me to write this!)

We work together on several projects. He works uses a basic version of visual studio 2010, while I work with visual studio 2012.
I created some .net 4 web projects for him to work in, and asked him to get the latest version from TFS.

He asked me if he should install WebMatrix and I answered with a simple no. This caused the projects to not being able to load.
I started checking the project references, nothing shocking. The project properties were also pretty basic, using custom webserver.

I discovered that the problem was IIS Express. This is not installed in VS 2010. Probably didn’t exists at the time of release.

So I checked the web server settings to see if IIS Express is enabled, but the project settings were set to custom webserver and the already disabled IIS Express checkbox was not checked.

I finally checked the project file, by using edit project file. This will unload the project and allows you to edit the project file, which is basically just an xml file. You should definetly check this out if you have never done that before.

And that’s where I saw the problem:

<UseIISExpress>true</UseIISExpress>

Setting this to false and reloading and committing the project file solved the problem!