Yeoman + AngularJS + Foundation: A Modern Front End Setup
- Yeoman : For scaffolding our web application.
- Bower : For front-end dependency management.
- Grunt : Command line tool for development.
- 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
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.
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 />
save flag will update your
<br /> $(document).foundation();<br />
Now you have a front end application ready for development, with a whole suite of tools and frameworks installed.