Tools & Tips

Building Apps with Yeoman

What is Yeoman?

Yeoman is a set of tools, libraries and a workflow to allow developers to build beautiful web apps. The amount of tools, grids, styles, bootstraps available for developers to use is countless! Rather than having to waste time creating a new project to get up and running, Yeoman solves the problem by scaffolding workflows for creating modern web apps, while making sure you’re using the best web standards within the industry.

Getting Started, Installing Yeoman

Before we start, make sure you have installed Node.jsGit and optionally, Ruby and Compass (if you plan to use Compass with SASS.

Enter the following in your Terminal; Bower and Grunt will install automatically:

Once it has finished installing run this command to create a new project and use the default generator:

Yeoman Install

Here you can select which tools you would like to you with your projects. HTML5 Boilerplate, JQuery and a Gruntfile.js is included by default.

Grunt is used to build, preview and test your project.

Once it has finished creating the project you are ready to start working on your web-app but say you wanted to use other tools or libraries? Well that’s easy to included within you project using Bower! Let’s say we wanted Underscore to be included; run the following command within your terminal:

Bower is used for dependency management, so that you no longer have to manually download and manage your scripts.

Done! easy as that. Now to build our application.

Yeoman Grunt

And now to run the app locally on a web server.

Yeoman Grunt Serve

Yeoman Bootstrap

 

There we have it, a preview of the web app displaying the default Bootstrap theme. No more having to fire up MAMP/WAMP to run a local web server. Yeomans’ built-in one can be started with just one command!


Leave a Reply

%d bloggers like this: