Yeoman + AngularJS + Foundation: A Modern Front End Setup

With the combination of modern browsers and mobile devices having support for HTML5, CSS3, and new JavaScript APIs, front end development has become a lot more complicated, but also exciting. There has been an explosion of tools as of late, and it can be daunting to know where to get started. Here are the tools and process I use to build a new front end application from scratch.

 

The Tools

  • Yeoman : For scaffolding our web application.
  • Bower : For front-end dependency management.
  • Grunt : Command line tool for development.
  • AngularJS : JavaScript framework based on the principals of dependency injection.
  • Foundation: Responsive SCSS Framework to speed up design.

Step 1: Install Yeoman and a Generator

We’ll be using Yeoman to handle all of our scaffolding. Yeoman will create the initial files and folder structure for you, so that you don’t have too. Yeoman uses generators, which are different templates it will use when creating your initial app. Yeoman is managed via npm. If you don’t have node and npm installed, you can get the NodeJS installer here. I prefer building web applications with AngularJS, so we’ll be installing a generator for an Angular application.

<br />
npm install -g yo<br />
npm install -g generator-angular<br />

Step 2: Create The Scaffolding

Now that we have our tools installed, it’s time to create our initial application. We’ll create a new directory and run the generator:

<br />
mkdir example-app<br />
cd example-app<br />
yo angular<br />

If you have everything installed correctly, Yeomen should start building your application. Select ‘yes’ when it asks you if you want to install compass, then select no when it asks if you if you want to install Bootstrap. After a couple of minutes, you folder structure should look like this:

<br />
Gruntfile.js<br />
/app<br />
bower.json<br />
bower_components<br />
node_modules<br />
package.json<br />
/test<br />

Step 3: Install Dependencies

Now we need to run our package managers to install dependencies. First, we will run NPM in order to install development dependencies, then Bower to install front end dependencies:

<br />
npm install<br />
bower install<br />

Step 4: Test The Servers

Run the server and make sure everything is working OK:

<br />
grunt serve<br />

Once this runs, navigate to localhost:9000. You should see the yeoman placeholder page.

Step 5: Clean out the Crud.

Yeoman adds a lot of content that is not needed. For example, it has multiple routes, controllers, and views already created for you. You can leave this in or comment it out if you want to keep an example, but I like to clear all of this out before I start working. Here is a quick checklist, so you don’t miss anything.

  • app/index.html – Remove most of the code in the body, but be sure to leave the div with the ng-view property.
  • app/views/main.html – Remove the excess HTML.
  • app/scripts/app.js – Remove the routes that you aren’t using. I get rid of the extra ‘about’ route, and delete all the related files.
  • remove app/controllers/about.js
  • remove app/views/about.html
  • remove spec/controllers/about.js
  • app/styles/main.scss – Remove all of the unused styles.

Step 6: Install Foundation

I prefer Zurb’s Foundation to Twitter’s Bootstrap. In my opinion, it’s easier to use and has cleaner markup. Since we are using Bower, this process is simple. Run the following command from the root directory of your project:

<br />
bower install foundation --save<br />

The save flag will update your bower.json file. If you want to use any of the JavaScript functionality of Foundation, add the following to your app.js file after use strict:

<br />
$(document).foundation();<br />

And Done!

Now you have a front end application ready for development, with a whole suite of tools and frameworks installed.

Miss your last deadline? Download a Free Chapter of “Dependable: Deliver Software on Time and within Budget”
Click Here to Leave a Comment Below 5 comments
The Venerable Reverend - 3 years ago

This is great for getting started.

The only problem I have is that after adding Foundation and putting the initialization for it I get the error:

PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR
ReferenceError: Can’t find variable: $
at /Users/development/Source/SampleAngularFoundation/app/scripts/app.js:4

I tried switching to use jQuery(document).foundation(); instead and I get the same issue.
Any suggestions?

FYI – I did do a bower install query –save as well.

Reply
    Glenn Stovall - 3 years ago

    That’s strange. Are you sure all of your npm packages are up-to-date?

    I’ll update if I find a solution, in the mean time since this article was published, Zurb has released Foundation for Apps, which uses Angular and is similar to this setup. It might be of interest to you: http://foundation.zurb.com/apps.html

    Reply
    ethanmayedu - 3 years ago

    Go into .jshintrc (in the root of your project) and edit the globals.

    Example: “globals”: { “$”: true, “jQuery”: true }

    Reply
Justyn Clark - a couple of years ago

Or you can just use Foundation for Apps built with Angular: http://foundation.zurb.com/apps.html

Reply
    Glenn Stovall - a couple of years ago

    Very true and probably what I would do these days. I published this article a while back, before the release of Foundation for Apps.

    Reply

Leave a Reply: