Yoooman! Getting Started with Yeoman (Part 1)
This tutorial series will teach you the basics of Yeoman ; how to set it up on Windows, how to use the tools and generators. I will also share my top 5 favorite yeoman generators along with a short review. You are expected to know HTML5.
Level: Beginner to Intermediate. Part 1: Getting Started with Yeoman Part 2: Generating a Backbone.js Project with Yeoman Part 3: 5 Awesome Yeoman Generators You Should Use Now
Part 1 – Getting Started with Yeoman
Welcome to Part 1 of my Yeoman Tutorial Series! In this part, I will explain what yeoman is, what the different components of the yeoman workflow are, why you should care and how to set it up on your machine.
How often do you find yourself starting a new website and immediately downloading jQuery, Underscore and Backbone or Angular into your project? Yeoman is here to save you time setting up your latest and coolest web projects using its powerful workflow and scaffolding tool.
What is Yeoman?
Yeoman is a tool designed for front-end web developers. It helps you start new projects right, set up according to the best practices and including tools to help with common tasks (e.g. minification, compression, etc.) Yeoman accomplishes this by providing a generator ecosystem. A generator helps define the scaffold for your projects and generates useful code for your starter project. There is a huge ecosystem of open source generators created by a community of contributors. In Part 4, I will showcase five of my favorite generators.
Why Should I Care?
Yeoman helps you standardize your projects alongside best practices and helps you get started with new projects much quicker. Often times, developers will refactor their naming conventions and file/folder patterns as their projects grow more complex. With a tool like Yeoman, you start off on the right track from the beginning and save valuable development time.
The Yeoman Workflow
Yeoman prescribes a workflow to improve your productivity and reduce your development time. The workflow is composed of three tools: yo (a scaffolding tool), Grunt (a build tool, alternatives are available) and a package manager (Bower, alternatives are available). Although all of the tools below are independent projects, they all work very well together to keep your project in good shape.
Yo is a tool written by the Yeomen team. It scaffolds out your new application, i.e. creates all the folders according to a best practice and sets up basic files like package.json or bower.json, etc.
Grunt is used to build, preview, serve and test your front-end app. You can also use Gulp.
Bower is used for dependency manager so that you don’t have to manually download and manage your scripts or just even manager the versions required. Bower will also take care keeping your scripts up to date with a simple command. You can also use npm.
Setting Up Yeoman on Windows 8.1
The main requirement for getting Yeoman up and running is Node.js.
Setting up Node.js
You will need a reasonably up to date machine. I will be showing you how to install Node.js on Windows 8.1.
Firstly, you will need to download and install the node.js runtime. You can download the current version 0.10.30 (as of this writing) here: https://nodejs.org/download/. Choosing the Windows Installer is one of the easiest ways to get started.
You should double check that the node executable has been added to your PATH system environment variable. Watch this video, if you want to see how to change your environment variables on Windows 8 and Windows 8.1. You will want to make sure the following folder has been added to the PATH variable:
C:\Program Files (x86)\nodejs\
If you go to your Command Prompt and type in node –h, you should see the help documentation for the node executable displayed.
Along with Node.js, NPM, the system used to manage node packages, should be installed and available on the Command Prompt as well. Simply type in npm –h, you should see the help documentation for NPM displayed.
If you encounter an error similar to this one:
Error: ENOENT, stat 'C:\Users\someuser\AppData\Roaming\npm'
The resolution is to create a folder at the path specified above, as shown in this StackOverflow question. This is only an issue in the latest node.js installer and should be resolved by next release. You can create the folder like so:
mkdir -r C:\Users\someuser\AppData\Roaming\npm
Alternatively, if you’re a fan of Chocolatey, the package manager for Windows, you can install node by running:
choco install nodejs.install
Setting up Yeoman
Firstly, you will want to install Yo. Open your Node.js command prompt that should now be in your Start menu. You will want to run the following to get Yo installed:
npm install -g yo
Secondly, you will want to install Bower. Run the following to get it installed:
npm install -g bower
Thirdly, you will want to install Grunt. Run the following to get it installed:
npm install -g grunt-cli
That’s it!
Alternatively, you can install all of the above in one line:
npm install -g yo bower grunt-cli
Testing Your Install
If you want to test your installation, I would recommend installing the webapp generator for Yo. The webapp generator is simple and gets you started on the right foot. This generator will scaffold a basic HTML5 web application including the HTML5 Boilerplate, jQuery, Modernizr, and Bootstrap (which you can choose to not use). Follow these steps to test this generator out:
npm install -g generator-webapp
Before running the next step, make sure you’re in an empty directory for your project.
yo webapp
This generator will also pull in useful Grunt tasks for minification and compression right off the bat. To try out these grunt tasks run:
grunt
This will run all the grunt tasks in the correct order according to the developer of the generator and you should see a great HTML5 project to get you started. Voila!
P.S. Make sure Git is in your path or Bower will not work correctly.
Conclusion
Yeoman is a great tool designed for front-end web developers. It helps you start new projects on the right foot and is a very powerful addition to every front-end developer’s arsenal. Next up, part 2 on generating a Backbone project.
You can stay up to date by following my twitter account @ramisayar.