Windows Development Environment

Foundation Apps Installation

Before I began I created a directory called DevTools where I put all the components mentioned in Foundation's Getting Started With SASS documentation at http://foundation.zurb.com/docs/sass.html

C:\DevTools 
\bower 
\git 
\grunt 
\nodejs 
\ruby

Creating the above directory structure isn't necessary. I did it simply to organize all the tools under one place to keep things organized.

The Basics:

Before we begin you will need to use the Command Prompt to enter several commands along the way. To open the Command Prompt in Windows click [Start], type "cmd" in the search box. You will see cmd.exe at the top under programs. press [enter] - The Command Prompt window will appear.

To change directories, use the cd command. >cd\path\to\where\you\want\to\be

Close the Command Prompt window by typing "exit" (no quotes) at the prompt.

You should also know how to access and edit your Environment Path. In Windows click [Start], type "path" in the search box. You will see "Edit environment variables for your account" at the top. press [enter] and you will see your Environment Variables box.

Note that it's divided into 2 sections, User Variables and System Variables. WARNING: Before you make any changes to your environment path it is HIGHLY recommended that you copy and paste your path into Note Pad and save it.

To edit a path scroll to the "Path" variable and press Edit... a small window will appear with the entire path highlighted. Press Ctrl + c to copy the entire path. Open Note Pad and press Ctrl + v to paste it. Save and close Note Pad. Now you can safely make changes if needed.

Environment paths can be quite long. To move to the beginning or end of the path, click inside the highlighted area to remove the highlight then press either the HOME or END key on your keyboard.

Note: For any changes you make to your environment path, you will need to close then reopen the Command Prompt box for the changes to take effect.

Close the Environment path box.

OK? Let the fun begin!

1) Install Ruby 1.9.3 or 2.x from https://www.ruby-lang.org/en/installation/

This is a straight forward install and should pose no problems.

2) Be sure that Ruby appears in your Windows environment path. Access the Path as outlined above. 
You should see something like "...\;C:\path\to\ruby\bin\;" at the end of your environment path.

Note that each program path must be separated with a semi-colon ";"

3) Confirm that Ruby installed correctly. Open the Command Prompt window and type "ruby -v" at the command prompt. You should see the version number of your Ruby installation.

4) Close your Windows Command Prompt before installing NodeJS

5) Install NodeJS at http://nodejs.org/ This too is a very straight forward process. You can use all the default options. Note that Node Package Manager (npm) will also be installed as part of the NodeJs install.

6) Confirm NodeJS is installed properly.

When NodeJS installation has completed, open the Command Prompt as described above and type “node” and [enter]. You should get prompted with a “>”.

If you get an error it may mean that there is an issue with your environment path. If you are already at a Command Prompt you can open your environment path by typing "sysdm.cpl" (no quotes) [Enter].

Next, select the Advanced tab, and click the Environment Variables button. Look to see that NodeJS appears in the path. If it doesn't, add it and be sure to use a ";" to separate the NodeJS path from other program paths Like so: ... ;c:\program files (x86)\nodejs\;

or...try this in your command line..

SET PATH=C:\Program Files\Nodejs;%PATH%

Also, check to see that a path to npm appears in the User Variables section of your Environment Variables. It should be in the top window and you should see something like: PATH... C:\Users\SomeName\AppData\Roaming\npm

If you do not see a similar entry, you may have to add the path to npm manually. NodeJs adds npm to your user account \AppData\Roaming so check there for the npm directory.

Close the command prompt, reopen it and and then try running node.

If NodeJS does appear in the path (usually at the end) it may mean that there is an issue with the path that sometimes isn't obvious. First, move the NodeJS path to the beginning of the environment path.

Make sure there is a "\" at the end of the directory path. (...\nodejs\;) Be sure that a ";" separates one program path from another. Also sometimes a trailing "\" from a prior program path is the problem. Try using a double ";;" as a separator.

Remember to always close the command prompt window and reopen it after any change.

Once any environment variable issue is resolved typing "node" on the command line will get the ">" prompt.

Now at the prompt type something like “1 + 1" and [enter]. You should get 2 as a result.

Now that we have confirmed that NodeJS is installed correctly, quit NodeJS by using the keyboard and typing [ctrl]+C twice. [ctrl]+c +c

7) Install Bower

Create a folder structure similar to the following: C:\Bower\apps

The reason Bower is used is to avoid having to manage client side dependencies (css, JavaScript, etc.). We will install Bower now so that we can use it latter to manage dependencies.

We will use Node Package Manager (npm) to install Bower. Using the “-g” (global) switch we can install Bower from any directory.

8) From inside the Bower directory you created type: "npm install -g bower" (no quotes and remember that npm is case sensitive)

For me it was C:\DevTools\Bower>npm install -g bower

9) Confirm Bower is installed

Since we want to install the dependencies in the “apps” directory, we will navigate into the “apps” directory. \Bower\apps>

Next we'll do a search for jQuery.

Inside the apps directory type: "bower search jQuery" (no quotes and remember, it's case sensitive) \Bower\apps>bower search jQuery

You should see a bunch of jQuery stuff scroll down your Command Prompt window. We now know Bower is working.

** In the Reply Section below JCJ80 reported that he add to bower to his path to get it to work on his Windows 8.1 system. I'm using Windows 7 and didn't have a problem. **

Close the Command Prompt window.

10) Install Git

Go to www.git-scm.com to download Git. You can also get there from Bower's website.

IMPORTANT! When installing Git BE SURE TO SELECT “Run Git from the Windows Command Prompt”. This will add Git to your environment path. DO NOT USE "Git Bash Only" radio button.

Once Git has installed check to see that it appears in your Environment Path.

11) Install Dependencies (jQuery and Underscore)

If you have the Command Prompt window open, close it.

Open a new Command Prompt and navigate inside the “app” directory that we created previously. For me it was C:\DevTools\Bower\app>

11a) Install jQuery using Bower. Remember, it’s case sensitive.

Type: "bower install jQuery" (No quotes)

11b) Now install Underscore. Remember it's case sensitive

From inside ..\bower\app> type: "bower install underscore"

12) Confirm Dependencies

There should be a new directory underneath ..\bower\app created by Bower called “bower_components” this is where jQuery and Underscore folders should have been installed.

Ok we're almost home...

Time To Install Foundation!

13) Zurb uses bower to manage the updating process of Foundation. After installing all the dependencies you need to do the following:

Type: "npm install -g bower grunt-cli" from the command prompt (no quotes).

14) Install the Foundation cli by running "gem install foundation" from the command prompt (again no quotes).

After the above is created, you'll use Grunt and Libsass to compile your SASS stylesheets.

15) First, create a New Project folder. Then navigate into the directory where you want all the files to be created. cd\path\to\NewProjectRootDirectory

16) Next you'll use the Foundation cli that you just installed to create all your new project files in your New Project root directory.

Type without quotes: "foundation new project_name --libsass" and watch the magic happen! Be careful to properly use the "new". It's a command and not part of project_name. Also note the two dashes before libsass.

In your New Project root, you should see a bunch of newly created files such as: .bowerrc, gitignore, bower.json, package.json, index.html, etc. There will also be a bunch of subdirectories created such as .git, bower_components, css, js, node_modules and scss.

If you see all that stuff CONGRATULATIONS! You're ALMOST there.

17) Time to Grunt

You need to use Grunt to compile everything before you start working:

From you NewProject root directory type: "grunt build"

18) To compile changes as you work type: "grunt watch"

If everything is working as it should, you'll see the following in your Command Prompt window: 
Running "watch" task 
Waiting...

19) To update Foundation type: "foundation update"

That's it! Go grab another beer. You earned it!