There are several years' worth of setting up the Edimax EW-7811N Wi-Fi adapter on a Raspberry Pi B on the internet. By now (2017) most of it is out of date and wrong. Last week, I wasted several hours trying to make WPA2 authentication work on my Raspberry Pi B. Hopefully this guide will save someone (or future me) some time.

My Hardware

• Edimax EW-7811N
• Raspberry Pi B Revision 2
• Rapbian Jessie Lite 1/11/2017

Getting Started

Roll back any changes you have made to the /etc/network/interfaces or /etc/wpa_supplicant/wpa_supplicant.conf files. I usually make .bak copies of config files before I make changes. However, if you did not make backups of these files, the contents of each original file is below.

/etc/network/interfaces

# interfaces(5) file used by ifup(8) and ifdown(8)

# Please note that this file is written to be used with dhcpcd
# For static IP, consult /etc/dhcpcd.conf and 'man dhcpcd.conf'

# Include files from /etc/network/interfaces.d:
source-directory /etc/network/interfaces.d

auto lo
iface lo inet loopback

#iface eth0 inet manual

allow-hotplug wlan0
iface wlan0 inet manual
    wpa-conf /etc/wpa_supplicant/wpa_supplicant.conf

allow-hotplug wlan1
iface wlan1 inet manual
    wpa-conf /etc/wpa_supplicant/wpa_supplicant.conf

/etc/wpa_supplicant/wpa_supplicant.conf

country=US                                                
ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev   
update_config=1                                           

Additionally, I had installed WICD at some point while trying to configure the adapter. WICD will eat up to 5% of CPU in idle so you will want to uninstall it if you journeyed down the same rabbit hole I did...

RESTART

Before continuing (and wasting more of your precious time) RESTART your Pi (sudo reboot or sudo shutdown -r now). I probably wasted another 30 minutes with a working solution because I hadn't restarted...

USB?

Make sure the Wi-Fi adapter is plugged in and showing via the lsusb command:

The Wi-Fi adapter should be show as "Edimax Technology Co..." as per above. If it is not showing up, try unplugging and plugging in the adapter and/or restarting.

Setting Up WPA2

To set up WPA2 authentication, you will only need to edit the /etc/wpa_supplicant/wpa_supplicant.conf file. Edit this file with the following:

country=US
ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1

network={
ssid="YOURNETWORKSSIDHERE"
psk="YOURPASSWORDHERE"
proto=RSN
key_mgmt=WPA-PSK
pairwise=CCMP
group=CCMP
auth_alg=OPEN
}

Replace YOURNETWORKSSIDHERE with your SSID and YOURPASSWORDHERE with your Wi-Fi password.

At this point restart your Pi.

Once your Pi has restarted fully, run the ifconfig command to confirm your adapter is getting an IP address. The wireless link should be next to wlan0 or wlan1 in the dump:

No Sleep

Finally, if your Pi needs to have Wi-Fi on at all times, be sure to disable power management by creating or editing the /etc/modprobe.d/8192cu.conf file via sudo nano /etc/modprobe.d/8192cu.conf:

# Disable power management
options 8192cu rtw_power_mgnt=0 rtw_enusbss=0

After this change, restart your Pi again.

Conclusion

I you found this guide helpful and hopefully it saved you some time! Until next time - happy coding!

Recently I had to set up a virtual machine (VM) that would mirror a VirtualBox VM pretty closely. I really didn't want to have to start over with a fresh machine set up so I decided to try to export the VirtualBox machine to our VMware host. After some trial and error I was able to get it to work.

The versions of software used is as follows:

• VirutualBox ~4.3
• vSphere Client ~5.1
• VMware ESXi ~5.1

Export the VM

To begin you will need to export the VirtualBox machine. First shut down the machine and choose "File" > "Export Appliance". Next select the machine you wish to export and click "Next".

On the following screen, select a destination for the output file and choose the OVA format and choose "OVF 1.0" format from the drop down and check the write manifest file box.

Click "Next" and then click "Export". Depending on the size of the machine this could take a while.

Preparing to Import the VM

Once the export is complete you can try deploy the OVA to ESXi but you will receive the following error, "The OVF package requires unsupported hardware. Details: Line 25: Unsupported hardware family 'virtualbox-2.2'.".

To fix this error, you will need to edit the OVF xml file in the OVA package. The OVA package wraps an OVF file, a mf checksum file and the actual vmdk or virtual machine disk. To extract the contents of this file, use 7Zip (right click > "7Zip" > "Open Archive") to extract the OVA contents. When you open the archive, you may receive a TAR error. You can just click "OK" to ignore it.

Make a backup copy of the OVF file and then open the OVF file with a text editor such as notepad++.

Change the following line:

<vssd:VirtualSystemType>virtualbox-2.2</vssd:VirtualSystemType>

to

<vssd:VirtualSystemType>vmx-07</vssd:VirtualSystemType>

After you have made this change, the checksum in the mf file will no longer match. To fix this error, you can just remove the line that references the OVF file. For reference, my file looked like this:

SHA1 (MyVM.ovf)= 15d2f22b24990179e414df556fe4a2e4697caee7

Import the VM

At this point you can try to attach the VM to your VMware box. Open the VMware vSphere client and connect to your host machine. Now choose file "Deploy OVF Template". Select the OVF file you just edited and click next. Make sure to select the OVF file, not the original OVA file.

At this point, you may receive a hardware error: "The OVF package requires unsupported hardware. Details: Line 74: OVF hardware element 'ResourceType' with instance ID '6'. No support for the virtual hardware device type '35'."

To fix this error, open the OVF file and remove the <item> element at the line # in question. In this case it was the sound card:

	<Item>
        <rasd:AddressOnParent>3</rasd:AddressOnParent>
        <rasd:AutomaticAllocation>false</rasd:AutomaticAllocation>
        <rasd:Caption>sound</rasd:Caption>
        <rasd:Description>Sound Card</rasd:Description>
        <rasd:ElementName>sound</rasd:ElementName>
        <rasd:InstanceID>6</rasd:InstanceID>
        <rasd:ResourceSubType>ensoniq1371</rasd:ResourceSubType>
        <rasd:ResourceType>35</rasd:ResourceType>
	</Item>

After you have made these adjustments to the OVF, try to load the file again. If you happened to leave the select OVF window open, you may not be able to select the OVF file from the browse or the drop down list selector. Just cancel and try again.

At this point you should get something like the following when you click next after selecting the modified OVF:

Now follow the prompts to finish importing your machine:

• Click "Next" and enter (or verify) the name

• Click "Next" and adjust Disk formatting if you wish

• Click "Next" and verify the network

• Click "Next" and click "Finish"

At this point, you will need to wait a few minutes for the VM to deploy. Once the machine has deployed, open the machine settings and make any adjustments you wish, such as memory or network adapter settings.

To complete your machine import, power on the machine and remove VirtualBox Guest Additions and install the VMware Guest Tools. Note: After the machine boots up and you log in, Windows will try to add hardware, click "Cancel" until you are installing the VMware Guest Tools.

First remove VirtualBox Guest Additions and restart. After the machine restarts, install the VMware Guest Tools. After the final restart you should have your VirtualBox machine running on VMware.

Closing Thoughts

I have been able to move quite a few VMs and physical machines to VMware after some adjustments. I hope this helps someone else in the future with their virtualization needs. Until next time - happy coding!

I enjoy learning and sharing with others what I have learned but sometimes these little things I learn are not enough to actually write a whole blog post about. To make up for this, I have decide to start something new called Random Useful Information. I hope you find one of these tips useful.

Blog Post Writing Tools

Markdown

If you are using Ghost to create and manage your blog, you may be in love with the interface and resource usage but a little disappointed in the editor. Don't get me wrong, the default editor in Ghost is great, but the lack of spell checking is really a no-go for me. After some searching and trying several markdown editors, I decided to use MarkdownPad 2.

The only con for me in regards to this application is that it is Windows only. I would love to use the same application on my Mac without having to use VirtualBox...

I decided to purchase the full version for the following reasons:

• To support the developer (I highly encourage this ;-)
• The ability to customize the editor (I HATE having to edit on a white background in any application)
• The ability to link in custom style sheets. I created a style sheet that is very close to this site so the live preview will be very close to what is actually published.
• Auto-save - this feature LITERALLY kept me from having to rewrite a couple of paragraphs in my last post
• Commercial use - I can dream of someday being a real writer right?

Git

Yes I actually started storing all my articles and related content in a Git repository. I create a directory for each article with a unique images directory. As I'm writing (or maybe when I am done), I commit my changes to Git and have an automatic back up.

Gist

To share code, I use GitHub's Gist. If you already have a GitHub account, it is easy to set up Gists. Also you can mark these Gists as private to just share with only others that have access to the Gist link.

Capitalize Your Title

Do you remember all those rules from English class about title capitalization? I don't either, but this little website titlecapitalization.com will do it for you.

Dynamic DNS

Several times in the last month, Comcast has randomly decided to assign me a new IP address at home. I have NAT set up on my router, along with an open port forwarding to my machine for remote desktop. In the past, I have tried to keep an A record up-to-date on my DNS but it was becoming a pain. DuckDNS is a great free option to keep track of your home machine IP. To set up DuckDNS first go to the site and log in via the top right using an OAuth service. The authors have decided to not maintain their own user store, so you will have to use a service to log in.

Once you have logged in, create a domain for the machine you want to track. I am using the Windows Powershell script to keep my entry up-to-date. This Powershell script runs every 5 minutes and persists after restart. To check the status of this Powershell script, you can use the following Powershell command:

 Get-Job | foreach{ $_.Name + ' ' + $_.PSBeginTime + ' ' + $_.State }

Finding Your IP via Google

This is a quick tip - go to google.com and enter "what is my IP" in the search box. Amazing right?

DNS Tools

Recently I moved my domains to a new web server on a completely new IP. I found several tools that were very useful in this process. The first is intoDNS. This service offers a full dump of all things DNS related to your domain.

Google offers a free DNS lookup tool via the Google Apps Toolbox at https://toolbox.googleapps.com/apps/dig/. Additionally in this Apps Toolbox, the Browserinfo section is very useful.

Flush Google's public DNS cache for a record can be done via https://developers.google.com/speed/public-dns/cache.

Additionally, sometimes Google Chrome will seem to get "stuck" on bad DNS records. If you open chrome://net-internals/#dns in Chrome, you can click a button to clear the host cache.

Removing Really Long File Names in Windows

Recently I botched a Robocopy and ended up with a bunch of recursive directories that I could not remove because the files paths were "too long". I guess that is a "feature" of Windows. I found this tip via Stack Overflow. To remove the bunk directory, create a temp empty directory and use the following command:

robocopy empty_dir base_nested_dir /purge

Fixed Orphaned Users in MSSQL

After restoring a backup in MSSQL, you will often end up with "orphaned" users. Here are a few quick commands to help fix these accounts:

--list all orphaned users
EXEC sp_change_users_login 'Report'

--fix the user
EXEC sp_change_users_login 'Auto_Fix', 'user'

--create a new user for a give user
--EXEC sp_change_users_login 'Auto_Fix', 'user', 'login', 'password'

--delete user
--DROP USER user

Conclusion

Hopefully you found one of these random items useful. Until next time - happy coding!

Generally I have found that for the sake of speed, installing MongoDB on Windows isn't the best solution in production. However for development, this might be your only or best option. Having a local installed MongoDB is convenient and useful for quickly prototyping concepts.

Download MongoDB

To install MongoDB first download and run the installer from http://www.mongodb.org/downloads.

Run the installer and advance to the following screen and click "Custom":

Expand the tree and select all options except "Router". You will only need to install the MongoDB router for a distributed DB and chances are for development you will not need this option. If you think you might need this option, go ahead and install it. Before clicking "Next" - select the root item and click "Browse..." to choose a new directory on a root drive (such as C:/). I highly recommend this as it will make running command line tools much easier without having to use an administrator command prompt. I will be using E:/mongoDB for my install.

To finish the installation, click "Next" and "Install".

Testing the Install

Once the installer has finished, you should test the install. First you should create a data and log directory for the install. I will use E:/mongoDB/data and E:/mongoDB/logs for both.

Once you have created these directories, open a command prompt and direct it to your install directory - E:/mongoDB/bin. The bin directory is the root for all install MongoDB related programs and tools. Run the following command to start MongoDB:

	E:\mongodb\bin\mongod --dbpath E:\mongodb\data

Leave this command prompt window running and start another command prompt and again direct it to your MongoDB directory. Run this command to connect to the MongoDB server:

	E:\mongodb\bin\mongo

You should now see a prompt. Try running the command "show databases" to see if the server is running correctly.

To exit this connection, type exit. To end the server session, enter control+C.

Setting up the Configuration for MongoDB

Before setting up MongoDB to run as a service, you should take a minute to set up the default configuration for your install. Navigate to your install directory and create a mongod.cfg file. Add the following lines to this file:

Test your new db configuration via the following:

	E:\mongodb\bin\mongod --config=E:\mongodb\mongod.cfg

In another command prompt window connect to the service via the IP and port as follows:

	E:\mongodb\bin\mongo 127.0.0.1:37011 

Setting up MongoDB to Run as a Service

You can use the installed MongoDB application itself to set up MongoDB to run as a service, but I like to have a little more control over the service install. Use the following line to set up the service. NOTE: You will need to run this command from an administrator command prompt.

sc.exe create MongoDB binPath= "\"E:\mongoDB\bin\mongod.exe --service --config=E:\mongoDB\mongod.cfg\" DisplayName= "MongoDB" start= "auto"

Once the service is created, start the service from the Services control panel or use the following to start the service:

net start MongoDB

Again, using the command prompt above, connect to the service using the mongo executable on port 37011.

To delete the service, run the following from an administrator command prompt:

net stop MongoDB
sc delete MongoDB

Troubleshooting Service Install

If you followed the steps above and you receive an error message, make sure the line to add a service is entered exactly as above. The spacing and quotes are important for the service to be added correctly.

Securing Your MongoDB Install

Security is not enforced in the default install of MongoDB. If you want to enable security, follow the next steps. I like to enable security on my install so that my development environment will be closer to production.

First log into your install and create a DB admin user:

mongo 127.0.0.1:37011/admin
use admin
db.createUser(
  {
    user: "mongoadmin",
    pwd: "p@ssw0rd",
    roles:
    [
      {
        role: "userAdminAnyDatabase",
        db: "admin"
      }
    ]
  }
)

Once you have added the mongoadmin user, quit mongo and add the following to the mongod.cfg you created earlier.

auth=true

After adding the above to the cfg file, restart the MongoDB service. Now you will need to use the username and password to access the databases. If you try to connect to the MongoDB service without credentials and run the "show databases" command, you will see an error:

However using the following to connect, you will be able view the databases:

mongo 127.0.0.1:37011/admin --username mongoadmin --password

Creating a New Database

Now you finally have your MongoDB service up and running. The next step is to create a new database with a unique user. First log into the admin db with your admin user:

mongo 127.0.0.1:37011/admin --username mongoadmin --password

Next use the following commands to create a new database with the mongoadmin user and a database user:

use testDB1
db.createUser(
  {
    user: "mongoadmin",
    pwd: "p@ssw0rd",
    roles:
    [
      {
        role: "dbOwner",
        db: "testDB1"
      }
    ]
  }
)

db.createUser(
  {
    user: "mydbuser",
    pwd: "test1234",
    roles:
    [
      {
        role: "readWrite",
        db: "testDB1"
      }
    ]
  }
)

To test the created user, quit the current mongo shell and log back in using the new database user as follows:

mongo 127.0.0.1:37011/testDB1 --username mydbuser

Finally create a new collection and return the result

db.test.insert({"name":"test value"})
db.test.find()

Conclusion

Hopefully you found this guide helpful. The MongoDB install guide is actually quite detailed now and can be found at http://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/. Until next time - happy coding!

I honestly have a love/hate relationship with Typescript. Most of the time I enjoy the shortcuts created by using Typescript. Typescript has several positive features that help me code faster and smarter, such as quick access to model or class properties, the ability to jump to code using F12, auto-complete on third-party and local libraries, and the layout of the resulting code structure. However, there are several things that I struggle with using Typescript, the biggest one is using a method on an object that isn't in the Typescript definition file or a property you have added to a custom object.

Extending Leaflet Definitions

I have run into this several times using Angular and the Leaflet Angular directive. The Leaflet Angular directive uses some models that are derivatives of the real underlying Angular models. The marker model is one of these items. Recently on a project I was working on, I could not get the following code to compile in Typescript.

marker.focus = true;

This is because I had declared this marker as the type L.Marker so I could access the methods that are shared by the Leaflet Angular directive object. Of course this definition does not contain the focus method which is specific to the Leaflet Angular object. I really didn't want to recreate definitions for this object. To account for this, I created the following interface to extend the Typescript definition.

declare module L {
    interface AngularMarker extends Marker {
        focus: boolean;
    }
}

Then in the resulting code, the marker can be cast to our new type and Typescript will allow us to compile.

(marker).focus = true

Closing Thoughts

I hope this helps someone save some time in the future. I was stuck on this one for about an hour near the end of a sprint and it was frustrating. Until next time - happy coding!

If you read my last post, hopefully you implemented Bower into your next Visual Studio project. If you are anything like me though, you probably noticed some files being published that you really didn't want to publish. This caused me to do some digging to figure out how to remove these files from publishing. Additionally I learned how to copy some files as well. This is useful for custom file publishing such as replacing a globals.js file.

To the Code

To get started create a blank MVC application in Visual Studio. If you want to cheat and get a complete kick start, click here to pull an example project from my GitHub.

Example Publishing

Once you have your example project set up, create a publishing profile. I am only using file based publishing in this post (maybe a follow up post is needed...). First start by publishing your project and selecting custom profile:

Now select the publish method, file system, and enter the location where you would like your files to be published.

On the final screen, select the configuration you would like to use for publishing. I also like to delete all my existing files and make sure not to include files from the App_Data folder.

When you are done, click publish to publish the files.

Time to Customize

At this point, VS will create a publishing profile for you. This is where you want to dig in and manually customize your publishing process. Expand the Properties directory and then the PublishProfiles directory to see the publishing profile XML.

Once you open this file, you will see something like the below as the default:

First you will create a publishing action to remove some files and a directory. To do this, you will be adding two new XML elements, ExcludeFilesFromDeployment and ExcludeFoldersFromDeployment to your pubxml file. The first element removes files you do not wish to deploy and the second removes directories you do not wish to deploy. The paths in both elements are relative to the project root. For this example I added an ignoreme.txt file and a RemoveFolder directory to the root of the project. Once you have made your edits, your pubxml file should look like the following:

Save your changes and publish your project using this publishing profile. You should see that the ignoreme.txt file, packages.config file and the RemoveFolder are not published to the publish directory. SWEET!

The final example of custom publishing involves copying a file from an external location to the final published location. This could be useful for something like replacing a global.js file. Inside your solution but outside of your project, create 2 files in a solution folder - global.js and renamefile.js. The contents of these do not matter. You only need to be able to tell what file it is. Additionally, in your scripts directory in your MVC project create another global.js file with different content in it.

Now you will be adding two additional targets and property groups to your pubxml file. Add the <Target Name="CopyGlobal"> and <Target Name="CopyAndRename"> elements and the associated <PropertyGroup> elements to your pubxml file. The result should look like the following:

Assuming your project is structured the same as mine (you might need to verify the path of your global.js file), when you publish you should notice the global.js file in the scripts directory is your external file. Additionally, you should now have the renamed config.js file.

If you want to copy more than one file, you can add additional &;lt_CustomFiles> elements to your target group. If you use this method however, you will need to use this line

<DestinationRelativePath>scripts\%(RecursiveDir)%(Filename)%(Extension)</DestinationRelativePath>

to ensure the files are placed correctly.

Also note that scripts</i> directory is where the copied files will be placed. If you want to use a different location you will need to adjust that.

Closing Thoughts

Hopefully this will save you some time in publishing your project with custom build actions. Although this isn't the Grunt of Visual Studio, it does allow some custom build actions without an additional bat file or script. Until next time - happy coding!

Yes the title of this post is correct. A recent extension for Visual Studio 2013 will let you run Grunt inside of Visual Studio. Scott Hanselman gave a quick overview here, but honestly I had to stumble through implementing it the first time. To save you some time read on!

Preparing Your Environment

If you haven't done any work with NodeJS on your machine, you will need to do a few things to get your environment ready for this extension. This extension is a wrapper for NodeJS, Git, Bower, Grunt, Gulp and npm. If you haven't heard of or used any of these tools, I would recommend reading the following:

• NodeJS - Everyone seems to be talking about it. It's a JavaScript based language that runs server-side. Grunt uses Node to run its tasks.

• Git - Git is a version control system that is distributed. The Windows install is pretty unobtrusive. If you have never used Git, give it a shot. You may love it, I do now!

• Bower - Bower installs client-side packages for the web, much like Nuget. Bower uses the Git repository for the client-side packages instead of the package having to be maintained by someone for Nuget.

• Grunt - Grunt is a JavaScript task runner used to help with builds, downloading packages, minifying files, all sorts of fun things!

• Gulp - Gulp is another JavaScript task runner, but is code-driven instead of declaration driven.

• NPM - Node packaged modules manager. Think of NPM as something kind of like the Nuget of Node. NPM is more powerful though as it allows you to install modules you can you use system wide, not just in your project.

What to Install

Here is the install order I would use for a fresh install. As a guy who dabbles in Node, I had most of these installed. You don't need to re-install any item below. I would just make sure they are up-to-date. For all the installers, the default options will be fine.

• Git

A note about your Git install: if you choose to install and use the Git bash, like I do, you will need to add Git to your path. Follow the directions here to do that. If installed correctly, typing git in a command prompt will display the git help screen.

• NodeJS

Once node is installed the following can be installed via NPM. NPM is installed with Node on Windows. Open a new command prompt and run the following commands.

npm install -g bower

The above command will install the bower package globally (-g) so any Node script can access the package on your machine. Now run the following 2 commands to finish all the installs we need.

npm install -g grunt-cli

npm install -g gulp

Once that batch of nitty gritty installs is done, you can finally install the extension for Visual Studio. You must install Visual Studio 2013 service pack 3 to install this package. If you haven't done that yet, check for updates in Visual Studio and install it. Once service pack 3 is installed, install the extension by downloading it here.

You will also need to install the following extensions to make your life a little easier:

• Package Intellisense Adds NPM and Bower package Intellisense right in Visual Studio.
• Grunt Launcher Adds a right click option for Grunt and Gulp files. Also allows you to do a right click, NPM install.

Using Grunt and Bower in Visual Studio

It's time for learning by example. To see why anyone would go through this much work to set up an extension, check out the following sample. First create a new empty web project. You can use Grunt and Bower in any web project, but for this example, keep it simple. If you want to cheat, you can check out the github for this example project here.

package.json

Once you have an empty web project, create the following package.json file. The package.json file is used by Grunt to provide information to Grunt about your project. These include the dev dependencies (what is needed to run your Grunt tasks) and the production (project) dependencies. The package below will tell NPM to install grunt and some grunt related packages that will be used in your grunt file.

{
    "name": "vs-grunt-example",
    "version": "0.0.1",
    "description": "Just a simple Grunt example - filled with fun and joy.",
    "devDependencies": {
        "grunt": "~0.4.5",
        "grunt-bower-task": "~0.4.0",
        "grunt-contrib-uglify": "~0.5.1",
        "grunt-contrib-concat": "~0.5.0"
    }
}

Once this package file is done, you will need to run NPM. Running NPM will install these packages and allow you to run your grunt script. I am in the habit of running NPM right after I make changes to my package.json script. To run NPM for your project, right click the package.json file and choose "NPM install packages".

bower.json

Now create a bower.json file. This file tells bower what you want your project to download and install in your project. More information about the bower.json file can be found here.

{
    "name": "vs-grunt-example",
    "version": "0.0.1",
    "authors": [
        "Randy Bacon <randy@hirerandybacon.com>"
    ],
    "description": "Example using grunt and bower in VS2013",
    "homepage": "www.hirerandybacon.com/blog",
    "dependencies": {
        "jquery": null,
        "leaflet": null,
        "leaflet-plugins": null
    },
    "exportsOverride": {
        "leaflet-plugins": {
            "control": "control/*.js",
            "css": "css/*",
            "layer": "layer/*.js",
            "layer/tile": "layer/tile/*.js",
            "layer/vector": "layer/vector/*.js"
        }
    },
    "private": true
}

Note: When I tried a fresh solution on another machine, bower could not read the bower.json file. It turned out the encoding was an issue. To fix it open the bower.json file, choose "Save As", click the arrow next to "Save", choose "Save with Encoding..." and finally select "Unicode (UTF-8 without signature)" for the encoding and "Unix (LF)" for the line endings.

Gruntfile.js

Now create the Gruntfile.js. This is where the magic happens. If you are still with me, then my virtual hat is off to you.

module.exports = function (grunt) {
    grunt.initConfig({
    	//this loads our packages for our grunt file
        pkg: grunt.file.readJSON('package.json'),
        
        //this section does our bower installs for us
        bower: {
            install: {
                options: {
                    targetDir: './scripts/vendor',
                    layout: 'byComponent',
                    install: true,
                    verbose: true,
                    cleanTargetDir: false,
                    cleanBowerDir: false,
                    bowerOptions: {}
                }
            }
        },
        
        //this section is used to join our js files together
        concat: {
            options: {
                separator: ';',
                stripBanners: true,
                banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                  '<%= grunt.template.today("mm-dd-yyyy") %> */',
            },
            devSrc: {
                src: ['scripts/vendor/jquery/*.js',
            'scripts/vendor/leaflet/*.js',
                    'scripts/vendor/leaflet-plugins/layer/tile/Google.js'],
                dest: 'scripts/vendor/dist/project-vendor-src.js',
            },
        },
        
        //this section is used to for our minify action
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'scripts/vendor/dist/project-vendor-src.js',
                dest: 'scripts/vendor/dist/project-vendor.min-<%= pkg.version %>.js'
            }
        }
    });

	//npm modules need for our task
    grunt.loadNpmTasks('grunt-bower-task');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');

    //run bower for package install
    grunt.registerTask('install-bower-packages', ['bower']);

    //build vendor file src
    grunt.registerTask('merge-js-files', ['concat']);

    //build min vendor file from above
    grunt.registerTask('min-js-file', ['concat', 'uglify']);
};

Using Task Runner Explorer

Once your Gruntfile.js is complete, you can run the fancy Visual Studio Task Runner Explorer that this post is all about and watch the magic...

Right click on your Gruntfile.js file and choose Task Runner Explorer. This will open up the tool that allows you to run your Grunt tasks. Note: if this option isn't showing up for you, try to quit and restart Visual Studio. You should see something like the below:

Running Bower

Right click the install-bower-packages Alias Task and click run.

The right window should now let you know bower is doing some work. When this is done you probably will not see any changes in your Solution Explorer. You will need to show all files in the Solution Explorer via this button:

In order to see changes after running your grunt tasks, you will need to refresh your Solution Explorer. After refreshing, right click the scripts directory and select "Include in Project". Now your solution should now look something like this:

Congratulations! You have just used Grunt to download and install js files in your project via bower. Any time the Git repository changes, you can run this command to update the JS files you have referenced. This is a very easy way to keep your JS files in sync with the Git for new versions and bug fixes.

Joining Our JS Files

The second task you created will join your vendor JS files you just installed into a single JS file. This is helpful in dev (you only need to include a single file) and also makes creating a minified file of this file much faster.

Again go to the Task Runner Explorer and right click the merge-js-files Alias Task. Again you will see a few messages in your command window to the right. You can now refresh your scripts/vendor directory and you should see the dist directory. Make sure to refresh your Solution Explorer and include the files in your project to use them.

Minifying Our JS File

The final task you created will minify your JS file for use in production. Right click the min-js-file task and click run. Again refresh the scripts/vendor/dist and you should see your new project-vendor.min-0.0.1.js file. Sweet!

Gotchas

A few issues I ran into while working on my grunt scripts:

• bower.json file encoding. Selecting the default .json template in Visual Studio will not work with bower and you will have to make adjustments to the encoding per above.

• Pretty bad error messages. If you have an error in your package.json file, the command output is not really too helpful.

• No bower search. From the command line you can run bower search item-to-search-for to find matching gits. There doesn't appear to be a way to do that via this tool.

• Solution Explorer does not automatically add new files. As you probably experienced above, the Solution Explorer does not show your bower installed files automatically. This is a minor annoyance, but still a 'gotcha'.

• NPM uninstalls - I was playing with different bower running packages and didn't like the first couple of packages I had installed. I was unable to delete them via Windows explorer because the path of some of the nested files was too long. To uninstall them, open a command prompt and browse to your web project directory. Run the following to remove a package:

  	npm uninstall <package name>
  

Closing Thoughts

Hopefully you can see the power of using bower and grunt in your project. It's a new world out there and Visual Studio is closing the gap between tools that are usually just used in Node or with Open Source tools. I find this change exciting and I'm very happy to be able to use bower inside of Visual Studio. Until next time - happy coding!

WOW! Moving this application (my new website and blog) to my Debian VPS was a little harder than I wanted and anticipated. Of course this was my first time publishing a Node app to production so some learning time was to be expected...

Getting Ready for Production

Before moving from PHP to Node on my server I had read several articles and posts about different set ups. I decided to move to NGINX from Apache as my web server. I have used Apache since my first FreeBSD server - about 15 plus years ago - but it was time to move forward to something faster and with a fun name. Another post will follow about this move later...

Since I already had NGINX up and running I just needed to adjust my website config to the following (real ports are not below but would be the port of your apps):

server {
	server_name www.hirerandybacon.com;

	location / {
    	proxy_pass http://localhost:<NODEJSPORT>;
    	proxy_http_version 1.1;
    	proxy_set_header Upgrade $http_upgrade;
    	proxy_set_header Connection 'upgrade';
    	proxy_set_header Host $host;
    	proxy_cache_bypass $http_upgrade;
	}

	location /blog {
    	proxy_pass http://localhost:<NODEJSPORT>;
    	proxy_http_version 1.1;
    	proxy_set_header Upgrade $http_upgrade;
    	proxy_set_header Connection 'upgrade';
    	proxy_set_header Host $host;
    	proxy_cache_bypass $http_upgrade;
	}
}

Additionally, I went the lazy route and published all my web files as is from the raw project. I plan on building a Grunt script to help with this but for now it was all manual.

What didn't work

I tried several methods to get my node app up and running. First I installed forever figuring it would be the easiest way (and I have heard others talking about it). Running forever from the command line is as simple as (note: the NODE_ENV=production export is for my ghost blog):

NODE_ENV=production forever start app.js

The first issue I had found was a warning about sqlite3. Because of my recent work with node-webkit I figured I needed to do an actual npm install on the machine to compile SQLITE. I changed to the web directory of my project and ran:

npm install sqlite3

Of course this yeilded some random error messages about permissions and also one of interest. I was missing make. So installing make was needed:

sudo apt-get install build-essential

After running this, the base application started but now the ghost module was complaining about sqlite3 (the joys of developing on Windows and publishing to Debian). I changed to the ghost directory inside of my web/node_modules directory and ran the npm install sqlite3 command again.

Finally this worked without issue and I was excited. Time to set it up to run via the cron. Being the old school Unix guy I was (or maybe more accurately the lack of recent Unix experience) - I rushed to set up an init.d script.

I tried several init.d scripts from git and Google search results. It seemed each had an issue and did not work well with my flavor of Debian - Wheezy. Additionally, more errors were caused by creating the scripts on Windows and coping it to my Debian box. Turns out carriage returns were the cause.

What finally worked after a while...

After wasting some good football watching time with the init.d I decided to try something simpler from the Ghost docs - Supervisor. The installation and config was pretty easy.

sudo apt-get install supervisor

On step 2 - service supervisor start I received the following a useless error message:

Error: Another program is already listening on a port that one of our HTTP servers is configured to use.  Shut this program down first before starting supervisord.

Great! A quick google search though indicated I just needed to run this:

sudo unlink /var/run/supervisor.sock

After running the command and trying again, the service was running. I banged out a quick config for my node application and saved it to the config.d directory - /etc/supervisor/conf.d/ - (of course the real path below is a little different but you get the idea):

[program:hirerandybacon]
command = node /mysecrectpath/app.js
directory = /mysecrectpath
user = www-data
autostart = true
autorestart = true
stdout_logfile = /var/log/supervisor/hirerandybacon.log
stderr_logfile = /var/log/supervisor/hirerandybacon_err.log
environment = NODE_ENV="production"

Now I went to fire off the supervisor program via:

sudo supervisorctl start hirerandybacon

And instead of a running app I received the following error message:

hirerandybacon: ERROR (no such process) 

"GRRR," said Randy. This required more Google searching which brought me to this solution:

supervisorctl reread
supervisorctl reload

FINALLY starting the program yields success and my site is now running. Or is it?

More Issues

I guess because I'm bored I decided to log into my blog and finish up my first post. I tired to log in and received no response until a toast popped up saying a server error had occurred.

I checked the supervisor log and of course there where no relevant log items. At this point I was tired and wanted to brutte force my way though this thing. I decided to try to run the Node app again via the command line but this time as the www-data user (you know the user I assigned the app to above). A quick change of the user via:

sudo su www-data

Firing up the app via:

NODE_ENV=production node app.js

And finally a useful error message. The database was opening in read only mode. Why? Because when I deployed my database, although I thought I had chown'd the data directory and db to the :www-data group I hadn't changed permissions... After changing the permissions on the data directory (775) and database (664) and restarting my app, I was in business.

After a few hours (or maybe an evening) my node app and blog is running in production. I guess the plus side is I had another topic to blog about.