Gaunt Face

Cordova + Web Best Practices v2.0

Cordova + Yeoman

My oh my doesn’t time fly, a little while a go I wrote a blog post on how to get Cordova and Yeoman to work together bringing the best practices of the web to Cordova based applications.

Well times have changed, we’ve all grown a little older, a little wiser and projects have progressed, with that in mind here is the new way to get yourself set up with Cordova and Yeoman.

Install Yeoman

If you haven’t used Yeoman before, then head on over to yeoman.io and step through the “Getting Started” guide, which will get you set up with Yeoman as well as the webapp generator (a.k.a. generator-webapp).

Ultimately you just need to run the following:

npm install yo -g

Cordova Set-Up & Install

Cordova set-up is nice and simple.

Start by installing the cordova-cli:

npm install -g cordova

Create a brand spanking new project with the command:

cordova create <Project Directory> <Package Name> <Project Name>

Example:
cordova create my-project co.uk.gauntface.myproject.cordova "My Project"

Cordova File Structure

Then add your platforms of choice (in this case Android).

cd my-project
cordova platform add android

You’ll now have a Cordova project ready to go, congrats :)

If you want, you can run an emulator with the following command:

cordova emulate android

Or run on an Android device with:

cordova run android

Cordova App on a Nexus 5

Set-Up Yeoman

This part of the guide will use Yeoman’s default generator (webapp generator), however the changes needed to get everything to play nicely, should apply to other generators as well (we only tweak the gruntfile.js).

To keep a clean directory structure within the Cordova project, we’ll want to add a directory at the root of the project for Yeoman.

mkdir yeoman

So we now have hooks, merges, platforms, plugins, www & yeoman directories in our project.

Next, lets run through our yeoman generator as normal

cd yeoman
yo webapp

Yeoman WebApp Terminal

Go through all the Yeoman prompts.

The next step is to get Yeoman building when we need it to and then copy the contents to the www directory.

To do this we can take advantage of the Cordova CLI hooks, so create a directory named before_prepare in the hooks directory.

cd ../hooks/
mkdir before_prepare

Then create a file in before_prepare with an appropriate filename like yeoman_build_copy_script.sh.

Add in the following shell script.

#!/bin/bash
 
echo "Building Grunt Project.";
cd ./yeoman/;
grunt build;
cd ../;
 
echo "Deleting files in ./www";
rm -rf ./www/*;
 
echo "Copying files from ./yeoman/dist to ./www";
cp -r ./yeoman/dist/* ./www/;

Next we need to make sure that the script is executable.

chmod +x ./hooks/before_prepare/yeoman_build_copy_script.sh

Then check it runs and doesn’t throw any errors:

./hooks/before_prepare/yeoman_build_copy_script.sh

Now whenever you try to run your project on an Android device, this script will be run, ensuring you have the newest version of your app built.

cordova run android

Yeoman and Cordova on Nexus 5

Cordova’s tools will actually add cordova.js to the projects root directory, so when you want to use some of Cordova’s features, you just need to reference cordova.js in your html page.

Fin.

With these hooks, you can have a pretty nice workflow, however it could be further improved if you could easily switch between running a local server with live reload vs a static build of the web app.

P.S. This will also work for Chrome Mobile Apps too https://github.com/MobileChromeApps/mobile-chrome-apps

Yeoman Loves Cordova

matt

Matt is a Developer Advocate for Chrome @ Google.

Working from, the (occasionally) sunny, city of London, focusing on the mobile web, specifically hybrid apps.