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:
[table]
Component,File Location
RequireJS,app/scripts/main.js
App Javascript,app/scripts/app.js
HTML,app/index.html
[/table]
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