Yeoman & Chrome Mobile App

Coding is a lot like writing a paper, getting past a blank page can be the most difficult step. Yeoman, a project templating tool, gives you a good start. I wouldn’t say that it writes the first page for you, but it at least draws lines on the paper.

Yeoman has tons of templates to choose from, written by the denizen's of the internet. The subject of this blog post is my first effort to customize an existing template.

My goal is to create a template for fullstack Angular projects where the client will be deployed to the web and to native Android and iOS applications. To do this I’ve forked the angular-fullstack generator.

My fork adds a new option to build a Chrome Cordova App. I picked CCA rather than Cordova directly because their Android builds ships with Crosswalk a cutting edge build of Chrome. This means that we got nice features like WebGL and WebRTC before they made it into the Android WebView. It also, means that we can be guaranteed that our Android application will run on a single build of Chromium. For iOS, CCA is still running the standard WebView; no magic there.

When you select "Y" for "Would you like to build a Chrome Mobile App?", you get additional Grunt tasks, some additional lines of Angular code, and a blank CCA project.

The Grunt tasks copy unminified code into the CCA project. This is pretty much a full dump of the client side project into a familiar Cordova www source directory. I don't minify the code because this code will only be downloaded once and it simplifies debugging and development. Perhaps in the future I will, it doesn't hurt to have a smaller download.

Once the code is copied I run a preprocessor that grabs the host's domain from an environment variable and replaces it in an Angular provider. An Angular http interceptor uses this provider to determine whether we're running the web app or the native app. If we're running the native app it prepends the domain name to requests. This allows us to keep the request relative while working on the web application.

So what is the big deal? With just a few commands you can create an application and have it built on Android, iOS and the web.

yo angular-fullstack sweet-app
grunt cca
cd cca
cca run android
cca run ios

The project structure and flow is a work in progress. If you'd like to use the generator on your own project or have ideas for improving it fork it on github.

https://github.com/htmlfusion/generator-angular-fullstack