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.

One of my articles is turning into a video

Not too long ago I wrote an article about "The top 5 things to tell your kid about software development" for my company.  It was both fun and easy to write about since I had a lot of concepts in my head already kind of geared towards that topic.

I just found out recently that our marketing department is going to turn it into a video!  Seeing some of their whiteboard brainstorming sessions, they are modeling it after the AT&T commercials where the guy in the business suit sits at a small table and talks in a very formal and stately way to 5 year old kids in a school.

Personally, I love those commercials, especially the one where the guy asks the little girl if she's running for the cutest kid contest.  They've all been funny and entertaining actually.

For me this is very exciting to see something I've done garner interest and even more as I watch the video come into fruition.  Next step is to try and have my own 5 year old be part of the video ... fingers crossed.

Reading about Facebook's React

Those of you that are active in the front-end and JavaScript development world probably know that there is a lot of buzz around React lately. I've heard it mentioned a few times on JavaScript Jabber and on a segment on DotNet Rocks when ClojureScript was mentioned. So I added it to my list and have been reading up on it lately (and watching a few videos) but I haven't actually tried to build anything with it just yet.

It's a library that Facebook has been using for a few years now, and while I don't actively use Facebook, I have gotten into using their open source testing framework Jest.  So because of that, I became more inclined to look into React.  Another motivation for me was finding out that Github's Atom editor was going to start moving over to using React.


Initial Reaction (Pun intended)

Seeing JSX code reminded me of how I used to write JavaScript back in 2008/2009.  I would hard code blocks of html in strings and inject values by hand, then use jQuery to display it.  Shortly thereafter, I learned to use jQuery Templates.

Also, the structure of React objects along with their events reminds me a lot of Backbone.  It's been a while since I've written Backbone code but I remember there being a render function and events to listen to that you add as methods of the Backbone class.


Other thoughts

I'm sure the React team has faced a fair amount of fire about html markup in the script but I can actually get on board with it.  I've used both Ember and Angular, more of the latter, and I find myself jumping back and forth between an html page (or template) and a controller a lot.  Yes, the code splitting windows of Visual Studio and Sublime accommodate this kind of volleyball well but there's something nice about a true single, self-contained component.

One of the key strengths React attests to is composability. Their concept of making components that contain other components is much cleaner and more obvious.  Not having built components with Ember yet, I can only compare my experience with Angular directives.  Now, I've only had to build very simple directives but I do remember that learning the terminology and structure of directives was tricky.  It took a few reads and re-reads to get the ideas down.  After seeing one example of a React component that contains another, it clicked right away.  They say that learning React is a lot easier than learning Angular.  So far, based off just the code samples on the React homepage I would agree.


Questions

Many articles I've seen claim that React is fast.  Definitely faster than the aforementioned frameworks.  But why?  Some say it is the way that it uses Virtual DOM.  When I first saw this I mistakenly took it to mean Shadow DOM which I learned about when researching Polymer.  Turns out that it's not the same thing.  So what IS Virtual DOM?  The concept of it is still fuzzy to me, and even more how they use it to update the DOM in a much quicker way than Angular.

On StackOverflow, I read suggestions that Virtual DOM and dirty checking possibly involved hashing and checking of immutable objects.  But again, it seemed like more confusion as to how this was actually faster when going to update DOM elements.

I'm hoping to uncover more of this as I start to actually use React in the near future.

My first design gig

Last week marked a milestone for me ... my first official design gig.  The project was to give a facelift to chicagochessleague.org, which was generally agreed as needing some improvement in the look and feel department.

The requirements were that they needed to maintain lots of links to pdf documents and for certain captain functions for tracking scores.  They also wanted to keep the Chicago skyline in there somehow if possible.

Here are some screenshots of the original site (images are clickable):

Homepage

History

Ratings

The tool I used to create the hifi mockups is called Macaw.  It's an interesting tool that generates html and css, it also started out as a Kickstarter project.

Here are some of the designs produced that were not picked:

And here are the designs that were picked including sample content page:

Being a developer first and an aspiring designer second, I consider this to be a good first start. This line of work is definitely interesting to me and I can see myself wanting to do more of it. Having a lot of front-end coding experience definitely helps.

The code that is put out by Macaw is pretty decent but could use a little TLC to get it up to my usual standards of coding but you cannot beat the productivity gains of Macaw.