2016-04-30

Linux, WebStorm, NodeJS & Web-Express from scratch - Part 1

I wanted to give NodeJS and Express a try using my WebStorm license. It wasn't plain sailing, but I worked it out and here are the steps

Supporting tools


First we are going to install nodejs. Open a Terminal window and type
sudo apt-get install nodejs
Some applications (such as WebStorm) expect the shell command to be "node" rather than "nodejs", so we can mirror it by typeing in the following commands
which nodejs
On my machine it shows /usr/bin/nodejs
sudo ln -s /usr/bin/nodejs /usr/bin/node
The first path is the one returned from step 1, the second path is the same but ending with node instead of nodejs 

Next we are going to install npm.
sudo apt-get install npm
 And then express-generator, which can be used by WebStorm to create a template project
 sudo npm install -g express-generator

WebStorm

Download WebStorm from the JetBrains website, it should go into your ~/Downloads folder. Go back to your Terminal and extract the downloaded file
cd ~/Downloads
ls -l
tar xvzf WebStorm{version number}.tar.gz
This will extract the files from the compressed file we downloaded. Next we need to move the newly extracted folder somewhere more suitable for applications, and with a more user friendly folder name. In my case the extracted folder was called WebStorm-145.597.6, and I decided to move it into /opt with the name webstorm instead.
ls -l
mv ./WebStorm-145.597.6 /opt/webstorm
Next launch WebStorm, and once it has appeared on screen right click it's icon in the task bar and select "Lock to launcher" to make it more easily accessible in the future. When it boots for the first time it will ask you for some default options. Make sure you check the box that allows you to add it to the system menu (or whatever WebStorm calls it).
cd /opt/webstorm/bin
./webstorm.sh
Now click "Create a new project", and then on the next screen select "Node.js Express App". The first time we do this we need to tell WebStorm where our Node interpreter is.

Because we aliased nodejs as node earlier, WebStorm should find the interpretor automatically, but probably won't have found our NPM. Look on New Project screen in front of you for a drop down input labelled Node Interpretor. If it is empty, you will need to click the drop down and select "Add". If WebStorm found our node interpreter (as it should have done) but not our NPM then there will be a [...] button to the right of the drop down, click that and you will be presented with a screen that allows you to change the path to the node interpretor and the Npm module path.

To find out where the npm module path is, go back to your Terminal window and type
which npm
On my machine the result is /usr/bin/npm - but if we put that into the WebStorm option and click Okay it will tell us that /usr/bin/npm/bin/npm-cli.js is not found. This is because /usr/bin/npm is a link rather than a directory. To find out where it points type
ls -l /usr/bin/npm
Make sure you change /usr/bin/npm to your result from the previous step if it is different to mine. The path shown for the link on my machine is /usr/share/npm - Put this value into the Npm module path and click the Okay button.

WebStorm will now create your template Express webserver project. Once it has finished, click the Debug button and wait for it to start up. You'll know when it's ready when you look in your WebStorm Console tab and see text that looks something like "Listening on port 3000"

All you need to do now is to open a web browser and navigate to http://localhost:3000 - Where you will be greeted with a "Welcome to Express" default screen.


2016-02-25

[Solved] MVCApplication Parser Error

I have this problem because I have to develop with VS running as administrator in order to use Local IIS hosting. When files are added (or generated by compiling) I think VS was setting the owner as Administrator, which IIS then cannot read. Start a command prompt as Administrator and type in the following
icacls c:\devpath\yourwebsite /grant everyone:(OI)(CI)F /T

2016-02-24

How to Create a Self Signed Certificate in IIS 7

I know I am going to want this link again in the future!

2016-02-04

VSTO Office plugin not appearing in Office 2007

If you have an office VSTO plugin that is working in other versions of Office but not appearing in Office 2007 then try setting the following registry value

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Office\12.0\Common\General\

Name = EnableLocalMachineVSTO
Value (DWORD) = 1


2016-02-01

Watching a single property in an array in AngularJS

A typescript example that converts the array's property into a single string that can be watched.
        $scope.$watch(
            () => this.someArray.map(x => x.selected ? "1" : "0").join(""),
            (newValue, oldValue, scope) => this.onSelectionChanged(this.getSelectedItems()));

Getting an AngularJS directive to call back a method on its parent's controller

Here is a TypeScript example of how to call back a method on the controller from an embedded directive. The most important thing to note is that the directive's parameter name for your callback uses a & when defined, and when calling that callback you should not use positional parameters but instead use an object with properties having the names of the parameters in the target.
Register the directive when you create your app module:
module MyApp {
    var app: angular.IModule = angular.module("MyApp");
    MyApp.Directives.FileUploader.register(app);
}
The registration code is as follows:
module MyApp.Directives.FileUploader {
  class FileUploaderDirective implements angular.IDirective {
      public restrict: string = "E";
      public templateUrl: string = "/app/Directives/FileUploader/FileUploaderDirective.html";

      //IMPORTANT - Use & to identify this as a method reference
      public scope: any = {
        onFileItemClicked: "&"
      };
      public controller: string = "MyApp.Directives.FileUploader.Controller";
      public controllerAs: string = "controller";
      public bindToController: boolean = true;
      public transclude: boolean = true;
      public replace: boolean = true;
  }

  export function register(app: angular.IModule) {
      app.controller("MyApp.Directives.FileUploader.Controller", Controller);
      app.directive("fileUploader", () => new FileUploaderDirective());
  }
}
The directive's controller would look like this
module MyApp.Directives.FileUploader {
    export class Controller {
        public files: string[] = ["One", "Two", "Three"];
        //The callback specified in the view that created this directive instance
        public onFileItemClicked: (fileItem) => void;

        // This is the controller method called from its HTML's ng-click
        public fileItemClicked(fileItem) {
            //IMPORTANT: Don't use comma separated parameters,
            //instead use an object with property names to act as named parameters
            this.onFileItemClicked({
                fileItem: fileItem
            });
        }
    }
}
The directive's HTML would look something like this
  • ng-repeat="item in controller.files" ng-click="controller.onFileItemSelected(item)"> {{ item }}
  • The main view will have an instance of your directive like so
     ng-app="MyApp" ng-controller="MainController as controller">
       on-file-item-clicked="controller.fileItemClicked(fileItem)"/>
    
    Now all you need on your MainController is a method
    public fileItemClicked(fileItem) {
      alert("Clicked " + fileItem);
    }

    2016-01-29

    AngularJs - binding HTML

    The directive ng-bind will escape HTML to avoid data acting maliciously. If you want to output html you need to use ng-bind-html

    <div ng-bind-html="someHtmlBody"/>

    The important step to getting this working is to ensure the script angular-sanitize.js is referenced on your page, and it is specified as a dependency when creating a module....

    var app = angular.module("MyApp", ["ngSanitize", "OtherDependencies"]);