Heygrady (there's a new blog)

I don't get It.

Building jQuery on Windows

Permalink

Like many things involving open source development, the jQuery project is designed to be worked on in a Unix-like environment such as OS X. Most regular people have a Windows machine (around 90%) but developers aren't regular people. Regardless, I primarily develop on Windows and I recently wanted to work with the jQuery code base and found the instructions for setting up your environment on Windows to be a little outdated. Thankfully the open source world is getting much friendlier for Windows developers. This article covers the official jQuery instructions and my preferred setup.

Existing Instructions

Likely because the jQuery developers are busy with more important things, the documentation for actually setting up your environment to properly develop for jQuery is a little sparse. In the case of a Windows setup the documentation is also a little outdated and possibly overkill.

The Instructions jQuery Provides

What's Outdated

Node.js

The links provided to Node.js on the jQuery GitHub page are to old binary builds of Node.js for Windows. Node.js was recently updated with a full installer for Windows thanks to Microsoft. You can download Node.js for Widows here.

What's Overkill

GNU Make

If you install the full version of msysGit you shouldn't need to also install GNU Make (more details below). More importantly, When you install GNU Make by itself it actually doesn't work. The jQuery make file is filled with Linux-specific shell commands that Windows doesn't support natively so the build will always fail. It's actually not possible to fix it by re-writing the Makefile to be Windows compatible because Windows batch files aren't as full-featured as a Linux shell script.

Cygwin

Cygwin is a "collection of tools which provide a Linux look and feel environment for Windows." It's nothing too magical; it basically ports common command-line programs to Windows. For instance, normally in a Windows command prompt to get a director listing you'd have to type dir but on Linux you type ls and the results looks different. What Cygwin does is makes the ls command (and many others) work correctly on Windows. It doesn't, however, make Windows magically become Linux. The primary benefit is that programs that rely on Linux command-line tools (but don't require Linux specifically) can run on Windows using Cygwin. However, Cygwin is a bit overkill for our purposes. We don't need a "complete UNIX/POSIX environment on Windows."

Cygwin isn't necessary if you install the full version of msysGit (more details below).

WAMP

WAMP is a great tool for getting up and running with Apache, MySQL and PHP very quickly. There's no doubt that WAMP is extremely popular. However, for the sole purpose of running the jQuery unit tests it's a bit overkill. For instance, there's no need for MySQL at all and Apache is just one way to run PHP in Windows.

Better Instructions

  1. Install msysGit-netinstall (msysGit-netinstall-1.7.8-preview20111206.exe as of 1/4/2012)
  2. Install TortoiseGIT (optional)
  3. Install Node.js for Widows
  4. Configure your environment path.
  5. Install IIS for Widows 7
  6. Install PHP for Windows (installer)
  7. Edit the jQuery Makefile.

Installing MsysGit and TortoiseGIT

The msysGit download page is needlessly confusing with a range of different packages available. The two important versions are the "Full installer for official Git for Windows" and the "Full installer (self-contained) if you want to hack on Git." The primary difference between the two is that the self-contained version is "complete, in the sense that you just need to install msysGit, and then you can build Git without installing any 3rd-party software." The differences are explained in the msysGit wiki.

The part about being "complete" is key because, similar to Cygwin, the developers of msysGit have re-created a handful of required Linux commands and made them compatible with Windows (actually the MinGW guys did it). This essentially means that installing msysGit gives you something similar to what Cygwin offers. More importantly, you can use those commands for building jQuery on Windows without installing anything as large or complex as Cygwin. MsysGit actually includes a full version of GNU Make as well so there's no reason to download GNU Make separately.

The net install version is different than the version used in the Github Instructions for installing Git on Windows. If you've already installed that version it's ok. You can leave it in place and install this version as well. What we're really after is the GNU Make that comes with the netinstall of msysGit.

  1. Download the netinstall version of msysGit
  2. Install msysGit to the recommended location.
  3. It will open a command prompt and start downloading and compiling stuff for a while. At the end you can safely close the window.

TortoiseGIT

TortoiseGIT is totally optional but it is nearly as full-featured as TortoiseSVN and is an extremely easy way to work with Git on Windows. I would highly recommend it for anyone new to Git, particularly if you've used SVN in the past.

Installing Node.js

The Node.js installer is really straight-forward. After installing you may need to restart your command prompt to make the node command available.

Configuring Your Environment Path

Both Git and Node.js need to be added to the your windows environment paths.

  1. Open the Control Panel and search for "environment." Then choose "Edit the system environment variables."
  2. Click the "Environment Variables..." button.
  3. Locate and highlight the "Path" system variable and click the "Edit..." button.
  4. Verify that the correct paths have been set in text field. HINT: it's useful to copy all of the paths into Notepad or a similar tool to make it easier to read. The following entries should exist in your path. The Node.js entries likely exist already.
    • C:\Users\{your user name}\AppData\Roaming\npm;
    • C:\Program Files (x86)\nodejs\;
    • C:\msysgit\mingw\bin;
    • C:\msysgit\bin;

Installing IIS and PHP for Windows 7

IIS comes with Windows and can be easily installed by following the IIS instructions provided by Microsoft. However, Microsoft also offers a video tutorial for configuring FastCGI with IIS and PHP and even has a quick install program available to install PHP with IIS.

Once PHP is installed in IIS, all that's left is to create a new site in the "Internet Information Services (IIS) Manager" that points to the jQuery source directory.

  1. Install PHP in IIS as described (look up one paragraph).
  2. Check out the jQuery source of jQuery as described in the "Build a Local Copy of jQuery" section of Tips for jQuery Bug Patching.
  3. You can open IIS by searching for it in the start menu.
  4. Rick-click on the sites tab and choose "Add Web Site..." from the menu.
  5. Fill-in your site details. The Site name is arbitrary. The Physical path is where you checked out the jQuery source code to. The Port is also arbitrary. It's common to specify a non-standard port number for security reasons. Below a port number of 8000 was specified. With that configuration, visiting "localhost:8000/test/" in your browser will begin executing the jQuery unit tests.

Editing the jQuery Makefile

The MinGW binaries will enable the `make` command and allow the Linux-specific shell commands to work flawlessly on Windows. However, the jQuery Makefile has a line that tries to find Node.js which causes the build script to think that Node.js is missing from your system. This is easy enough to correct.

Original Makefile
SRC_DIR = src
TEST_DIR = test
BUILD_DIR = build
PREFIX = .
DIST_DIR = ${PREFIX}/dist
JS_ENGINE ?= `which node nodejs 2>/dev/null`
...
Windows Friendly Makefile
SRC_DIR = src
TEST_DIR = test
BUILD_DIR = build
PREFIX = .
DIST_DIR = ${PREFIX}/dist
JS_ENGINE = node
...

Conclusion

After following the steps above you should be able to execute commands in the Windows Command Prompt similar to Unix-like environments. This should make it trivial to work with the jQuery source code. The basic steps above could be used to make development of almost any Linux-centric project easier on Windows.

The following shows Node.js, GNU Make, Git and PHP available from the windows command-prompt.

Comments