Configure your Windows environment for developing modern web applications using the popular MEAN Stack and Yeoman suite of utilities.
Depending in which MEAN stack generator or pre-build project you start with, in addition to the main four technologies, you will pull down several other smaller libraries and frameworks. These most commonly include jQuery, Twitter Bootstrap, Karma (test runner), Jade (template engine), JSHint, Underscore.js (utility-belt library), Mongoose (MongoDB object modeling tool), Passport (authentication), RequireJS (file and module loader), BreezeJS (data entity management), and so forth.
If you are involved in these modern web development trends, then you are aware there is also a fairly common set of tools used by a majority of these developers, including source control, IDE, OS, and other helper-utilities. For SCM/VCS, Git is the clear winner. For an IDE, WebStorm, Sublime Text, and Kompozer, are heavy favorites. The platform of choice for most developers most often appears to be either Mac or Linux. It’s far less common to see a demonstration of these technologies, or tutorials built on the Microsoft Windows platform.
There is no reason Windows cannot serve as your development and hosting platform for modern web development, without specifically using Microsoft’s .NET stack. In fact, with minimal set-up, you would barely know you were using Windows as opposed to Linux or Mac. In this post, I will demonstrate how to configure your Windows machine for developing these modern web applications using the MEAN Stack and Yeoman.
Here is a list of the components we will discuss:
The use of Git for source control is obvious. Git is the overwhelming choice of modern developers. Git has been integrated into most major IDEs and hosting platforms. There are hooks into Git available for most leading development tools. However, there are more benefits to using Git than just SCM. Being a Linux/Mac user, I prefer to use a Unix-like shell on Windows, versus the native Windows Command Prompt. For this reason, I use Git for Windows, available from msysGit. This package includes Git SCM, Git Bash, and Git GUI. I use the Git Bash interactive shell almost exclusively for my daily interactions requiring a command prompt. I will be using the Git Bash interactive shell for this post. OpenHatch has great post and training materials available on using Git Bash with Windows.
Git for Windows provides a downloadable Windows executable file for installation. Follow the installation file’s instructions.
To test your installation of Git for Windows, call the Git binary with the ‘–version’ flag. This flag can be used to test all the components we are installing in this post. If the command returns a value, then it’s a good indication that the component is installed properly and can be called from the command prompt:
gstafford: ~/Documents/git_repos $ git --version git version 1.9.0.msysgit.0
You can also verify Git using the ‘where’ and ‘which’ commands. The ‘where’ command will display the location of files that match the search pattern and are in the paths specified by the PATH environment variable. The ‘which’ command tells you which file gets executed when you run a command. These commands will work for most components we will install:
gstafford: ~/Documents/git_repos $ where git C:\Program Files (x86)\Git\bin\git.exe C:\Program Files (x86)\Git\cmd\git.cmd C:\Program Files (x86)\Git\cmd\git.exe gstafford: ~/Documents/git_repos $ which git /bin/git
The reasons for Git are obvious, but why Ruby? Yeoman, specifically yo, requires Ruby. Installing Ruby on Windows is easy. Ruby recommends using RubyInstaller for Windows. RubyInstaller downloads an executable file, making install easy. I am using Ruby 1.9.3. I had previously installed the latest 2.0.0, but had to roll-back after some 64-bit compatibility issues with other applications.
To test the Ruby installation, use the ‘–version’ flag again:
gstafford: ~/Documents/git_repos $ ruby --version ruby 1.9.3p484 (2013-11-22) [i386-mingw32]
Optionally, you might also to install RubyGems. RubyGems allow you to add functionality to the Ruby platform, in the form of ‘Gems’. A common Gem used with the MEAN stack is Compass, the Sass-based stylesheet framework creation and maintenance of CSS. According to their website, Ruby 1.9 and newer ships with RubyGems built-in but you may need to upgrade for bug fixes or new features.
On Windows, installation of RubyGems is as simple as downloading the .zip file from the RubyGems download site. To install, RubyGems, unzip the downloaded file. From the root of the unzipped directory, run the following Ruby command:
To confirm your installation:
gstafford: ~/Documents/git_repos $ gem --version 2.2.2
If you already have RubyGems installed, it’s recommended you update RubyGems before continuing. Use the first command, with the ‘–system’ flag, will update to the latest RubyGems. Use the second command, without the tag, if you want to update each of your individually installed Ruby Gems:
gem update --system gem update
MongoDB provides a great set of installation and configuration instructions for Windows users. To install MongoDB, download the MongoDB package. Create a ‘mongodb’ folder. Mongo recommends at the root of your system drive. Unzip the MongoDB package to ‘c:\mongodb’ folder. That’s really it, there is no installer file.
Next, make a default Data Directory location, use the following two commands:
mkdir c://data && mkdir c://data/db
Unlike most other components, to call Mongo from the command prompt, I had to manually add the path to the Mongo binaries to my PATH environment variable. You can get access to your Windows environment variables using the Windows and Pause keys. Add the path ‘c:\mongodb\bin’ to end of the PATH environment variable value.
To test the MongoDB installation, and that the PATH variable is set correctly, close any current interactive shells or command prompt windows. Open a new shell and use the same ‘–version’ flag for Mongo’s three core components:
gstafford: ~/Documents/git_repos $ mongo --version; mongod --version; mongos --version MongoDB shell version: 2.4.9 db version v2.4.9 Sun Mar 09 16:26:48.730 git version: 52fe0d21959e32a5bdbecdc62057db386e4e029c MongoS version 2.4.9 starting: pid=15436 port=27017 64-bit host=localhost (--help for usage) git version: 52fe0d21959e32a5bdbecdc62057db386e4e029c build sys info: windows sys.getwindowsversion(major=6, minor=1, build=7601, platform=2, service_pack='Service Pack 1') BOOST_LIB_VERSION=1_49
To start MongoDB, use the ‘mongod’ or ‘start mongod’ commands. Adding ‘start’ opens a new command prompt window, versus tying up your current shell. If you are not using the default MongoDB Data Directory (‘c://data/db’) you created in the previous step, use the ‘–dbpath’ flag, for example ‘start mongod –dbpath ‘c://alternate/path’.
To install Node.js, download and run the Node’s .msi installer for Windows. Along with Node.js, you will get npm (Node Package Manager). You will use npm to install all your server-side components, such as Express, yo, Grunt, and Bower.
gstafford: ~/Documents/git_repos $ node --version && npm --version v0.10.26 1.4.3
To install Express, the web application framework for node, use npm:
npm install -g express
The ‘-g’ flag (or, ‘–global’ flag) should be used. According to Stack Overflow, ‘if you’re installing something that you want to use in your shell, on the command line or something, install it globally, so that its binaries end up in your PATH environment variable:
gstafford: ~/Documents/git_repos $ express --version 3.5.0
Yeoman – yo, Grunt, and Bower
You will also use npm to install yo, Grunt, and Bower. Actually, we will use npm to install the Grunt Command Line Interface (CLI). The Grunt task runner will be installed in your MEAN stack project, locally, later. Read these instructions on the Grunt website for a better explanation. Use the same basic command as with Express:
npm install -g yo grunt-cli bower
To test the installs, run the same command as before:
gstafford: ~/Documents/git_repos $ yo --version; grunt --version; bower --version 1.1.2 grunt-cli v0.1.13 1.2.8
If you already had Yeoman installed, confirm you have the latest versions with the ‘npm update’ command:
gstafford: ~/Documents/git_repos/gen-angular-sample $ npm update -g yo grunt-cli bower npm http GET https://registry.npmjs.org/grunt-cli npm http GET https://registry.npmjs.org/bower npm http GET https://registry.npmjs.org/yo npm http 304 https://registry.npmjs.org/bower npm http 304 https://registry.npmjs.org/yo npm http 200 https://registry.npmjs.org/grunt-cli
All of the npm installs, including Express, are installed and called from a common location on Windows:
gstafford: ~/Documents/git_repos/gen-angular-sample $ where express yo grunt bower c:\Users\gstaffor\AppData\Roaming\npm\yo c:\Users\gstaffor\AppData\Roaming\npm\yo.cmd c:\Users\gstaffor\AppData\Roaming\npm\grunt c:\Users\gstaffor\AppData\Roaming\npm\grunt.cmd c:\Users\gstaffor\AppData\Roaming\npm\bower c:\Users\gstaffor\AppData\Roaming\npm\bower.cmd gstafford: ~/Documents/git_repos $ which express; which yo; which grunt; which bower ~/AppData/Roaming/npm/express ~/AppData/Roaming/npm/yo ~/AppData/Roaming/npm/grunt ~/AppData/Roaming/npm/bower
Use the command, ‘npm list –global | less’ (or, ‘npm ls -g | less’) to view all npm packages installed globally, in a tree-view. After you have generated your project (see below), check the project-specific server-side packages with the ‘npm ls’ command from within the project’s root directory. For the client-side packages, use the ‘bower ls’ command from within the project’s root directory.
If your in a hurry, or have more Windows boxes to configure you can use one npm command for all four components, above:
npm install -g express yo grunt-cli bower
MEAN Boilerplate Generators and Projects
That’s it, you’ve installed most of the core components you need to get started with the MEAN stack on Windows. Next, you will want to download one of the many MEAN boilerplate projects, or use a MEAN code generator with npm and yo. I recommend trying one or all of the following projects. They are each slightly different architecturally, but fairly stable:
- Linnovate’s MEAN.io project on GitHub (boilerplate MEAN project)
- James Cryer’s npm generator-mean, a Yeoman generator for MEAN stack, inspired by mean.io
- William Lepinski’s MEAN stack generator for Yeoman, generator-meanstack, based on the generator-angular.
- Jim Lavin’s Introduction to the MEAN Stack on YouTube
- Google Developer’s Getting MEAN on YouTube
- Introduction to the MEAN Stack, Part One: Setting Up Your Tools
- The MEAN Stack: MongoDB, ExpressJS, AngularJS and Node.js
#1 by Gary A. Stafford on March 11, 2014 - 3:54 pm
For one machine, in order to update some of my Gems (bigdecimal, io-console, json), I had to download and install the Ruby Development Kit first then rerun gem update: https://github.com/oneclick/rubyinstaller/wiki/development-kit
#2 by Noah Funk on April 12, 2014 - 1:24 pm
Excellent resource. Well documented – thank you
#3 by Ant Biggs on May 12, 2014 - 6:14 am
Thank you for this. Brilliant! but in my case (Windows 7) there was a problem with express. The files couldn’t be found.
I tried this
npm install -g express-generator@3
All looks dandy.
#4 by Gary A. Stafford on May 12, 2014 - 4:28 pm
Thank you. I hadn’t run into the same problem with Windows 7 Enterprise, but thanks for pointing it out. I double checked and I don’t have it installed on my main box.
#5 by gps on May 17, 2014 - 11:18 am
First i would like to thank you for this really great tutorial. When i try to follow https://github.com/linnovate/mean i get mean not recognized as a internal or external command, operable program or batch file. I followed all your steps on windows 8 cmd prompt (adding path variables when needed). How did you run it inside git bash? I tried running nodejs which was installed on windows and works fine in cmd prompt but not in git bash shell. Please help.
#6 by Niek on May 26, 2014 - 8:14 am
If you can’t acces the express command then checkout this on stackoverflow http://stackoverflow.com/a/23266782/1885448
#7 by gps on June 27, 2014 - 12:52 pm
@niek yes tried the same. But when i do express –version i get express not recognized as internal or external command
#8 by Charlie on August 5, 2014 - 1:30 pm
Starting from express 4.00 you also need to install express generator with: npm install -g express-generator. Only after this will you be able to run express as a command!
I install express-generator then it showed version number. Need add this in blog.
#9 by Juangui Jordán on August 19, 2014 - 7:28 am
I still had problems with bower running “yo angular”, resolved it with “git config –global url.”https://”.insteadOf git://”
#10 by Nir Shney-dor on August 26, 2014 - 4:39 am
Pure gold, thank you so much for your clear explanations.
#11 by Hari Raghav on September 17, 2014 - 2:35 am
Thank you much for the tutorial..I have done all the steps and i am able to run http://localhost:3000 .I have one basic clarification..How to open the folders window(Last image on thsi tutorial). I need to edit the controllers.Pls help me
#12 by stg on October 3, 2014 - 7:10 pm
This was great except as other folks noted, I needed to run:
$ npm install -g express-generator@4
Consider updating your instructions.
#13 by Bart Buurman on February 10, 2015 - 8:19 am
I experienced a problem running $ express –version. You can drop the 4@
just run $ npm install -g express-generator and you’ll be fine.
Now if you run express –version you’ll get the version back.
#14 by Tomislav on October 20, 2014 - 6:25 pm
After installing NPM, if you get an error when running npm commands that says “Error: ENOENT, stat ‘C:\Users\username\AppData\Roaming\npm'”, it simply means you don’t have the specified folder. Go to %appdata% and create “npm” folder there.
Also, if you had the command prompt open when installing, close it and then open it again to be able to run npm commands since PATH variable is reloaded only with new shell.
#15 by lynda on November 20, 2014 - 2:56 pm
thank you much for the tutorial
#16 by fagbemi4adebayo on January 2, 2015 - 9:32 am
U didnt tell us what to do when we run ‘ruby –version’ and Ruby can not be found by Git.
#17 by Gary A. Stafford on January 2, 2015 - 2:37 pm
I didnt tell you what to do if any of the apps don’t install properly. Did you install Ruby, as explained in the post? I would retry the install.
#18 by Bart Buurman on February 10, 2015 - 8:20 am
Before doing a re-install try to restart Bash and run $ ruby –version. This worked for me
#19 by Neeraj kumar on November 5, 2015 - 7:05 pm
Thanks for wonder full post.
I got few issues which is, i have installed ruby as well but when i run “grunt” it gives me some warnings like you need have ruby and apart from that my major concern is it shows error.
MongoError: cannot connect to server.
Please suggest me something.
#20 by Collier on February 10, 2016 - 9:15 am
I am trying to deploy on a Windows machine running IIS 7 but keep getting a 404 not found error for all my static files that lie in the ‘lib’ folder. I have also adding a web.config file to rewrite all requests to ‘server.js’ file located on the root folder. pls help
#21 by George on August 8, 2018 - 5:49 pm
I am ASP.Net developer. I have visual studio 2015 already installed. Now, i want to begin development with MongoDB, Express and Node.JS.
I have installed Node.js and downloaded Express and Mongo. how do i go about the whole thing to have a full fledged web application developed and hosted on my windows 8 Pro.