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.
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>
cordova create my-project co.uk.gauntface.myproject.cordova "My Project"
Then add your platforms of choice (in this case Android).
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
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.
So we now have hooks, merges, platforms, plugins, www & yeoman directories in our project.
Next, lets run through our yeoman generator as normal
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.
Then create a file in before_prepare with an appropriate filename like yeoman_build_copy_script.sh.
Add in the following shell script.
echo "Building Grunt Project.";
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:
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
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.
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