Scaffolding with Yeoman
(and friends)

We'll Learn How to...

Scaffold an app using only a few commands with Yeoman
- Why? To save time / effort / energy
Use Grunt to automate tasks
- Live reload, minification, compilation, etc.
Customize a Sass file

What's Yeoman?

Yeoman is a command line tool that allows us to easily build web applications.

We'll be using it in conjunction with a few other tools as a part of our development toolchain.

http://yeoman.io

Our Tools

Yeoman (Scaffolding tool)
Grunt (Build tool)
Bower and npm (Package managers)

First Things First

$ npm install -g yo bower grunt-cli

Before we get started we'll need to ensure we have our tools installed.

Assuming you already have npm, run the following command to grab Yeoman, Bower and Grunt.

Run Yo

// install generator
$ npm install -g generator-webapp

// create a new directory
$ mkdir aaa-yo
$ cd aaa-yo

// generate a new app
$ yo webapp

Now we'll create a home for our application, make sure we're inside that folder and then run the yo command.

Follow the Prompts

I selected Bootstrap, Sass and Modernizr. "Y" to libsass!

Build + Deploy

The build may take a while because of all the awesome happening behind the scenes (we'll get to that shortly). In the end you'll have a fully scaffolded web app!

$ grunt serve

To start the server run:

Your app should open automatically in a browser window at localhost:9000

File Structure

Let's peak into a few files and folders inside our shiny new application.

App

app: a parent directory for our web application

index.html: the base html file for our app
favicon.ico, and robots.txt: commonly used web files so you don’t have to create them yourself
scripts:
- main.js: our main application JavaScript code
styles:
- main.scss: our Sass file

Dependencies

bower_components, bower.json: our JavaScript/web dependencies, installed by Bower

Gruntfile.js, package.json, and node_modules: configuration and dependencies required by our Grunt tasks

Gruntfile.js

This is the code that creates a server on localhost:9000 and enables live reload...

    connect: {
      options: {
        port: 9000,
        open: true,
        livereload: 35729,
        // Change this to '0.0.0.0' to access the server from outside
        hostname: 'localhost'
      },
      livereload: {
        options: {
          middleware: function(connect) {
            return [
              connect.static('.tmp'),
              connect().use('/bower_components', connect.static('./bower_components')),
              connect.static(config.app)
            ];
          }
        }
      },

Live Reload

This might be my favorite part of Yeoman's generated goodies.

Live reload allows us to make changes to any of our app files and automatically see updates on localhost WITHOUT refreshing the page.

Try it

To see live reload in action make a small change in the stylesheet and save it.

/* app/styles/main.scss */

body {
  padding-top: 20px;
  padding-bottom: 20px;
  background: black;
}

Then take a look at your terminal window. Your app compiles automatically.

Now open take a look in the browser.

Scaffolding with Yeoman ​(and friends)