1 Nov 2014

Creating a Mobile App with Yeoman

I've been reading Addy Osmani's Developing Backbone.js Applications book and want to create a mobile app using Yeoman. This project will use npm, Bower and Yeoman to setup a quick project. There's a reference a good overview of these tools Juri Strumpflohner here. In this post, I'll review the steps to use Yeoman to setup a sample mobile app.I'm doing this on Ubuntu 14.04.

Install Node & npm

I use this script on Ubuntu 14.04 to perform a local install and then create a link to the local version of npm

sudo ln -s ~/.node/bin/npm /usr/bin/npm

You can also use the following command to install npm globally.

sudo apt-get install npm

Install Bower, Yeoman and Grunt

Next we'll install Bower and initialize our projects package.json file and also initialize our bower.json configuration file.

npm install -g bower
npm install -g grunt-cli
npm install -g grunt
npm install -g yo
npm install -g rgstephens/generator-mobile

Create Project Directory

Create and switch to the project directory. If you're using Intellij, create a new Foundation project.

mkdir base-mobile
cd base-mobile

Setup Project with Yeoman

You'll be prompted to choose one of several mobile frameworks supported by Yeoman generator-mobile. I'm choosing to use the Foundation framework for this sample app largely based upon the criteria in this table.

In the current version of generator-mobile I had to run grunt with the --force option to get past a jshint warning.

yo mobile
grunt --force
grunt serve

The current version of generator-mobile has a bad reference to the foundation.css file. I created a github repository that fixes this and also uses the Foundation 5.4 release which is why the npm install command above references my rgstephens/generator-mobile repository instead of the standard yeoman/generator-mobile.

My Foundation Tempate

I have a basic Foundation menu template here. I replace the initial contents of the <body> section of app/index.html with this file to give me a basic Foundation menu system to start with.

Foundation main.js

In addition to the Here's an updated main.js with the updated settings for foundation. These are required to correctly initialize Foundation.

Key Files

Here are the location of the main configuration files used:

Component,File Location
App Javascript,app/scripts/app.js

Other Resources

In the process of writing this, I came across some other resources not all are quite on this topic but close. How to make a PhoneGap app in an hour or less by talPor Solutions. Breaking Down Bower by Jesse Showalter. Building Apps with the Yeoman Workflow by Stephen Sawchuk. Comparing HTML5 Mobile Frameworks by Andrew Smith.

Summary Steps

To summarize, here are the steps:

- Create new Static Web project in Intellij or just create your project directory
- Run yo mobile
- Run grunt --force
- Replace app/scripts/main.js with this gist
- Replace app/index.html <body> with this gist.
- Run grunt serve