Wednesday, July 8, 2015

Getting Angular's $http.post method working with Web API

By default, when you deploy a .Net Web API project, you are not allowed to make cross site requests to it from, say, an angular application.  The browser will prevent the call from happening because your api needs to send the proper response header to allow the call to be made.

In order to enable it, you need to make a modification to your web.config file.  Enter the following somewhere between your system.webServer tags:
<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>
</httpProtocol>
Also, in your ApiController, add an empty Options method (some browsers issue this command to check the validity of a cross origin request):
    public class DataController : ApiController
    {
        public void Options() { }
    }


Friday, January 30, 2015

Getting Docker working on Windows 8.1

1. Installation

Download and run the latest installer:  https://github.com/boot2docker/windows-installer/releases

Pick all 3 items to install unless you know that you already have them on your machine.




2. Enable virtualization

Reboot your computer and go into the BIOS settings.  Find and enable Virtualization which should look something like the image below:




3. Make sure VirtualBox can launch the VM

Launch Oracle VM VirtualBox and select the boot2docker-vm image.
Click Settings -> System.
Make sure the RAM is set to 4096 MB (or 2048 if you can't give it that much).
Click the Start button to start the VM and see if you get any errors.




4. Launch Boot2Docker

If everything went well you should be prompted to enter the password for docker@localhost.  The password is 'tcuser'
For some reason, I was prompted repeatedly until I reached the linux console.


Eventually you should reach the console prompt, then you're ready to start using Docker!




For further reading go here (by maximheckel) for details on running docker and sharing folders (scroll down to Running Docker containers):

http://blog.tutum.co/2014/11/05/how-to-use-docker-on-windows/


Tuesday, November 11, 2014

Thoughts on Meteor - Part 1: Documentation

Just a few months ago I told myself that I was going to start looking into React.  It's been gaining a lot of popularity and boasted a new architecture and philosophy on binding data to views.

Right around the same time I started reading that Meteor was nearing its 1.0 release.  I had watched the video on Meteor and tried out their demo for what seemed like a year ago, so it was interesting that they were approaching this major milestone.

As I read more about the features via the Discover Meteor and MeteorHacks newsletters I really got sucked back into it.  I bought the Discover Meteor book and am working my way through it.  Between meteor.com and atmospherejs.com there is a good amount of reading that you can do before you get started using it.  I'm still working my way through the docs seeing if I can get a better handle on the underlying technology and patterns used so that I can better explain to my fellow developers what's going on under the hood.

I definitely recommend you do the following for your first foray into Meteor:

1. Go to meteor.com and create an account
2. Run through the Tutorial on meteor.com (only works for OSX and Linux, I'll cover an alternative to this in the next blog post)
3. Read the Subprojects page on meteor.com to learn more about the components that make up the Meteor project.  Some of these links will point to atmospherejs for the project's readme.
4. Check out DiscoverMeteor.com and determine for yourself if you want to buy the book.  It was worth it to me so far.

Wednesday, August 20, 2014

Creating Visual Studio item templates to increase productivity

Goal

In this post we'll look at extending Visual Studio by creating an Item Template to help with code generation.  In the past I've relied heavily upon code snippets for generating chunks of code but item templates help more so when I need to generate an entire code file or several code files at once.  Also, parts of the file will need to be dynamic in that I want to give the file a custom class name.

These instructions are for use with Visual Studio 2013.


Prerequisites

Make sure you have VS 2013 SDK installed.
Install the SideWaffle template pack extension.


Steps

1. Create a new VSIX project.

2. Open the Package Manager Console in Visual Studio

3. Execute Install-Package TemplateBuilder –pre

4. Create a folder named ItemTemplates at the root of the project

5. Under that folder create a folder with the name you want to show up in the Add Item dialog box (a good choice would be your company name).

6. Right-click the new Company folder (or whatever you named it) and click Add -> New Item.  Select the SideWaffle Item Template and give it an appropriate name.

7. Add the actual file that you want to be created by your template into this new template folder (same level as the readme.txt file that was added).  Optionally, if you want more than 1 file to be added just add those also.  If you want them to be added to subfolders then create those subfolders here to match.

8. Inside the Definitions folder that it creates will be 4 files with a .vstemplat- extension.  Rename all applicable files for your template to have a .vstemplate extension.

9. Edit the .vstemplate file(s) and set DefaultName to the actual filename that you want shown in the dialog window when it asks for a filename to save to.  Also, change the Name and Description fields accordingly.

10. In the same file edit the ProjectItem element by removing readme.txt from it's contents.  Replace it with the name of the file you added in step 7.  If you're adding more than 1 file then just copy and paste this line for every file needed.  If the file is in a subfolder then make sure to put the folder name first in the content like this:

<ProjectItem ReplaceParameters="true">css\site.css</ProjectItem>

(For info on replacing parameters, skip down to the last section)

11. Edit the source.extension.vsixmanifest file at the project root.  Make sure to edit the Install Targets to the correct version(s) of Visual Studio that you want.  For me I edited the version range to be [11.0, 12.0].

12. Edit the Metadata and put values for Product Name, Author, and Description.

13. Now build your project and go to the Debug folder in File Explorer and you should see a .vsix file there that you can deploy.  If you just want to test the extension then run it in Debug mode and it will launch a 2nd VS instance that will have the Item Template available.


Replacing parameters in template files

Let's say that you're adding a new CSharp class from this template and you need to know the name that the user entered.  You can put tokens in your source file that will get substituted.  FYI, the documentation that I found on MSDN didn't work for me for some reason.

I ended up using these two tokens:  $fileinputname$  and  $rootnamespace$

Intellisense will complain but you should still be able to build the solution.  Here is what my sourcefile.cs looks like:
namespace $rootnamespace$
{
    public class $fileinputname$
    {
        public $fileinputname$()
        {
        }
    }
}

Wednesday, August 6, 2014

Addressing the problem with npm install jest-cli on Windows 8

This post is specifically about trying to get Facebook's Jest testing library working on a machine running Windows 8 (or 8.1).  I also happen to have Visual Studio 2013 installed (and just this version).


Install Python

I will assume that node and npm are already up and running on your machine.  You need to have Python 2.7.x installed.  Version 3 is out already but we need 2.7.  During the install you have to manually enable the option that puts Python in your Path environment variable.


Install jest-cli

Open a command prompt in your project root and type:
npm install jest-cli --save-dev --msvs-version=2013

The reason you need the --msvs-version option is that the contextify node package will need to be built using VS build tools and it will look for 2010 by default.  Be sure to specify the correct version on your machine.  Credit goes to Kevin Griffin for his article on this.


If all goes well you should see no errors.  Here is what my package.json file looks like afterwards:

{
  "name": "reapcast",
  "version": "1.0.0",
  "description": "smart podcasting",
  "devDependencies": {
    "jest-cli": "^0.1.18"
  },
  "scripts": {
    "test": "jest"
  }
}


Friday, August 1, 2014

Getting the windows sidebar working on Windows 8.1

There are a few desktop gadgets that I like having: a clock, calendar, weather, twitter feed, and magic folder launcher.  Since Windows 8 has turned off windows sidebar and gadgets due to security issues, you have to do a little work to get them back.

Step 1

Install 8gadgetpack (free)

Step 2

Run a registry command to enable explained here

In case that site gets lost, here are the contents of the .reg file

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Policies\Windows\Sidebar]
"TurnOffSidebar"=-

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\Windows\Sidebar]
"TurnOffSidebar"=-

Step 3

Right-click on the windows desktop and select Gadgets.  The window should pop up and allow you to start putting widgets on your desktop again.  7 Sidebar is useful for grouping widgets together and docking them to a single side of your monitor.


Tuesday, July 29, 2014

IIS Node for first timers

Target Audience

This how-to blog is intended for individuals that are comfortable creating sites in IIS (possibly including setting up SSL certificates) and are now looking to run a Node website.


Background

If you're interested, the next paragraph describes my requirements when I went through this process.  Feel free to skip to the steps.

We've been working on an internal coding competition site for the past few months now and we chose to strictly use Node rather than making it a .Net website.  It's being hosted using an Azure VM because we also needed a local MongoDB to house the data.  We also require https since we're providing user auth.


Step 1

On your server (or machine) make sure to install the necessary software:

1. Node
2. IIS rewrite module
3. IISNode for IIS 7.x/8.x: x86 or x64


Step 2

Create an IIS application which is pointing to the root folder of your Node app.


Step 3

In your Node code, make sure you use the following variable for the port that Express (or whatever web server you're using) listens on.
var port = process.env.PORT;


Step 4

Add a web.config file to the root folder of your Node app and paste the following code in it.  Note that there is a section to force SSL, if you don't need this then comment that section out or remove it.
<configuration>
  <system.webServer>

    <handlers>
      <!-- Change server.js to the starting node script of your app -->
      <add name="iisnode" path="server.js" verb="*" modules="iisnode" />
    </handlers>

    <rewrite>
      <rules>

        <!-- Force SSL -->
        <rule name="HTTP to HTTPS redirect" stopProcessing="true">
          <match url="(.*)" />
            <conditions>
              <add input="{HTTPS}" pattern="off" ignoreCase="true" />
            </conditions>
          <action type="Redirect" redirectType="Found" url="https://{HTTP_HOST}/{R:1}" />
        </rule>

        <!-- Catch any url the user is trying to go to and go directly to the starting node script -->
        <rule name="server">
           <match url="/*" />
           <action type="Rewrite" url="server.js" />
        </rule>

      </rules>
    </rewrite>

    <!-- Path to node on the local machine -->
    <iisnode nodeProcessCommandLine="C:\Program Files\nodejs\node.exe" />

  </system.webServer>
</configuration>

That should be all the steps needed.  Your node website should come up without the need to fire up node in any console.