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.

npm install -g yo
npm install -g generator-angular

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:

mkdir example-app
cd example-app
yo angular

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:

Gruntfile.js
/app
bower.json
bower_components
node_modules
package.json
/test

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:

npm install
bower install

Step 4: Test The Servers

Run the server and make sure everything is working OK:

grunt serve

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:

bower install foundation --save

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:

$(document).foundation();

And Done!

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

[content_upgrade cu_id=”43″]Miss your last deadline? Download a Free Chapter of “Dependable: Deliver Software on Time and within Budget” [content_upgrade_button]Estimate Smarter[/content_upgrade_button][/content_upgrade]
Click Here to Leave a Comment Below 0 comments

Leave a Reply: