Skip to main content

Love Your Frontend Tools on Windows

10-29-13 Patrick Simpson

You don’t have to miss out on great frontend development tools on a Windows’ machine. Patrick will tell you how to get frontend tools you’ll love.


Windows is often neglected by sweet command-line, development tools. We admit it, we’ve neglected Windows in the past too. But, undeniably it is still a popular development environment. We’re ready to own and share the love with our Windows developers!

The Tools

To find out what each of these tools does, check out Part I of this series.


  • Sass

  • Compass

  • Automated Deployment Tools


  • CoffeeScript

  • GruntJS



We suggest, which is written specifically for Windows. You can find the downloads section here:

Ruby Installer

We also recommend downloading the 32bit version due to some packages not being available for the 64bit version. The 32bit version will work on 64bit systems.

After downloading the most recent version of Ruby, run the installer file (.exe).

Ruby Installer setup screen

For simplicity, install with all options:

  • TCL/TK gives you all available packages.

  • Add Ruby executables to your PATH; it allows you to run Ruby as a command in your command prompt.

  • Associate .rb and .rbw files with this Ruby installation, which will allow you to run Ruby programs with this program.

Ruby Installer setup completion screen

After installing the Ruby Installer, Ruby should now be configured to run. You can test your Ruby installation by opening command prompt and typing Ruby -v.


C:\Users\Patrick>Ruby -v

ruby 2.0.0p247 (2013-06-27) [i386-mingw32]

You can harness the power of gems! Try creating a test project and adding a few gems to it.


With Ruby installed, you can now install Sass by running the following command:

gem install sass

Command prompt running

With a normal CSS file, you can simply rename the file from “style.css” to “style.scss” and start using Sass to compile your “.scss” file to a CSS file.

run the command:

sass—watch style.scss:style.css

Command prompt running

Warning: First, specify the Scss file, then the output file. Be careful not to reverse the order of these. You may overwrite your Scss file with the CSS version of the file. For best results, you may want to modify the name of the CSS file to be less confusing.

sass—watch style.scss:compiled-style.css

Command prompt running

You’ll notice that the compiled-style.css was created, which, at this point, will look nearly identical to the .scss file. However, now you can start using Scss power! Try nesting a few styles, and watch your CSS file grow!


To install Compass, run:

gem install compass

Command prompt running

Next, you will run the “compass init” command in your project root directory.

Command prompt running

After you run “compass init,” you can run “compass watch” to begin monitoring for changes to your Sass files.

Note: Compass comes with opinions—and for good reason. Compass init separates your Sass files with your compiled CSS. This directory structure looks like this:

File directory after running compass

Then, you can move your previous Scss files into the “sass” directory, and it will compile the new CSS file in the “stylesheets” directory. You can delete your previously compiled Scss file in the root directory to avoid any confusion.

Compass showing a change

Automated Deployment Tools

At Sparkbox, we use various automated deployment tools, such as Capistrano or Mina. These tools are highly customizable and server-side specific. This means, there are a lot of options and configurations for you to handle. Whatever you choose, using some kind of automatic deployment will definitely save you time.

We will have future posts about getting automated deployment working in Windows. For now, take a look at:


Navigate to and download the latest version of NodeJS.


At time of writing this post, “node-v0.10.21-x86.msi” is the latest file, but this tutorial and testing were done with “node-v0.10.19-x86.msi”. Follow the steps in the images below:

NodeJS Setup
When prompted to select the way you want the feature to be installed, select
Completed Node.JS Setup screen

To test if NodeJS is working on your system, open up command prompt, and run node -v.

Command prompt running


Installing CoffeeScript is the same across platforms. After installing NodeJS, install CoffeeScript by running the following command:

npm install coffee-script

Command prompt running

coffee -c

This command will compile your CoffeeScript file to scripts.js in the same directory.

You can download an example of CoffeeScript here:


Just run:

npm install -g grunt-cli

Command prompt running
Command prompt running

After Grunt is installed, you can now create and/or use Grunt projects. Start by adding Gruntfile.js and packages.json. You can read more about Grunt projects here:

Git for Source Control

Git for Windows is located here: Git Setup will install a small version of Bash that will allow you to run Git commands in a terminal emulator. You can also use a GUI version of GitHub ( if you’re not comfortable using the Bash on Windows systems. For this exercise, we’ll be using the command line (terminal emulator) version of Git.

After downloading the Git installer, run the .exe file for the Git Setup process. Next, click through the first two screens. We will default the install directories.

Git installer screen

Choose “Git” as the Start Menu folder, or specify a custom folder.

The default components will already be selected for you. It’s best to leave the defaults, but if you feel the need to add additional components, feel free to select them here:

Git insaller component selection page

Again, we will be using the default (Bash-only) version of Git.

Git Installer adjusting PATH environment selectig

This is also recommended as the default option for Windows:

Git installer configuring the line ending cnverstions selecting

After that, click finish, and you are good to Git!

You can run Git Bash from your Start Menu:

Selecting Git Bash from the Windows start menu.

You can test out your Git install by cloning down a test repository: in your bash terminal, type “git clone”:

Command prompt running “git clone [](”

There is much more to learn and love about Git. You can learn more using these resources:

Putting It All Together

Now that you have all of these powerful web-development tools at your fingertips, try putting them all together and use our very own project-init. This will give you the ability to create (very quickly) a prototype website—locally!

You can Git the source from GitHub (do not clone) and download the zip file here.

Place this in your source directory and follow the instructions to setup project-init on your system. You will simply use your command prompt as before.

Make sure you install the bundle gem.

gem install bundle

Command prompt running

Next, you’ll need to run the “npm install” command in the directory. This will install a lot of node modules required to make the project-init work. After “npm install” installs all the modules—some may fail, but that’s ok, because they’re not needed entirely—you will then run “grunt” in your command-line:

Clicking allow access on Windows security alert

Click “Allow access” to continue.

Command prompt from

You should see “running ‘connect:server’” on a port number like “5000.” That means you can now access your new project files in the browser at: http://localhost:5000/

You should see the following page:

Result page

Congratulations! This means you’re all ready to make changes.

Grunt will watch your source files for changes, update them automatically, then refresh your browser. You should see the changes.

Handlebars templates are found in full-test/partials. More about Handlebars here:

Project-init will compile your site into a “dist” directory. You can find that in full-test/dist. This is a static version of your website, which you can easily distribute.

That’s it! I hope you love your frontend tools on Windows. Enjoy!

Related Content

User-Centered Thinking: 7 Things to Consider and a Free Guide

Want the benefits of UX but not sure where to start? Grab our guide to evaluate your needs, earn buy-in, and get hiring tips.

More Details

See Everything In

Want to talk about how we can work together?

Katie can help

A portrait of Vice President of Business Development, Katie Jennings.

Katie Jennings

Vice President of Business Development