Setting Up Yeoman on Windows — AngularJS Development Notes

Yeoman is a great starting point if you create an AngularJS project from scratch. Setting up Yeoman on Windows machine for MS developers is not as straightforward. I have read through Preparing a Windows Machine to use Yeoman and Installing Yeoman Front-end Development Stack in Windows, eventually I came up with my own set of steps:

1. Setup Node.js

  • Have node.js installed
  • Modify the path environment variable to include the path to node.exe and npm.cmd
  • Start a new command prompt and test to make sure npm and node can be started anywhere

2. Setup Yeoman for webapp or angular specifically

  • Run npm in command prompt to install modules
      • npm install -g yo (bower and grunt are automatically installed)

                Yo scaffolds out a new application
                Grunt is used to build, preview and test the project
                Bower is for dependency management like NuGet

  • npm install -g generator-webapp
  • npm install -g generator-angular
  • Modify the path environment variable to include AppData\Roaming\npm

3. Setup Ruby (this is only needed if you will use SCSS in your AngularJS app)

  • Install Windows 64 bit Ruby
  • Start Ruby command prompt
    • gem install sass
    • gem install compass
  • Modify the path environment variable to include the path to Ruby.exe and Compass.bat

*Path setting example:
PATH=%NODEJS%;%APPDATA_NPM%;%RUBY%;%PATH%
NODEJS=G:\Program Files\nodejs\
APPDATA_NPM=%USERPROFILE%\AppData\Roaming\npm
RUBY=G:\Ruby200-x64\bin

If you need to choose some good front end dev tools, I highly recommend Sublime Text 3.

Follow Kickstart Your AngularJS Development with Yeoman, Grunt and Bower, and replace process.env.LOCALAPPDATA in ..\node_modules\karma-chrome-launcher\index.js by the actual chrome.exe path on your machine (can’t simply fix through environment variables), off you go! You will get a taste of real AngularJS project and some great karma test features! Very cool!

Handy Yeoman commands

  • yo angular
  • yo angular:app myAppName
  • yo angular:controller myControllerName
  • yo angular:directive myDirectiveName
  • yo angular:filter myFilterName
  • yo angular:route myRouteName
  • yo angular:service myServiceName
  • yo angular:view myViewName
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s