How to change top-level `www` directory in cordova?

[Bob Paul]

I'm currently developing an AngularJS project with Cordova. For my AngularJS project, I'd like to have a directory called src/app at the root of the project that contains index.html and all of my application modules. However, Cordova expects a www directory instead. How can I tell Cordova to look in src/app?

[Kerri Shotts]

My suggestion: a build system.

I like gulp, but grunt is well respected. You could even use Cordova hooks for the process I'm about to describe.

Essentially, you make your "www" directory a build artifact. Your real app is at "src", and your build process packages your files and then moves them into www. I've done it where the src file lives within the Cordova project and I've also done it where the src file lives outside the cordova project (essentially resulting in a "meta project"). I have reasons for preferring both, but I don't think it really matters. If using Cordova hooks, I'd probably keep src within the cordova project so you can use the cordova commands easily. 

For example, my build process looks like this:

1) copy assets from src to www (files that don't need processing, like images)

2) compile scss to css and copy the result to www

3) package js files (using browserify), minify, and copy the result to www, replacing {{{VERSION}}} with the app version

4) copy config.xml from the meta project to the cordova project, replacing {{{VERSION}}} with the app version

My build process allows me to bump the version number whenever I want and a single build command ensures my cordova project (and thus my app) reflects that change. The build process can also execute specific Cordova commands, so "gulp build"  can do the above copies, and then execute a cordova build, all with a single command.

Although I prefer gulp, grunt (and any other task runner) can do the same thing.

Now, that doesn't have anything specifically to do with Angular, but I would suggest that you should be able to build something similar for your project. If you do keep your src in your cordova project and use PhoneGap Build, be sure to add a .pgbomit file to the src directory so that PhoneGap build doesn't try to use it as the www.

Hope that helps!

[Bob Paul]

Thanks so much for your help.

Your solution is similar to my initial thoughts as well. So, there really is no way around the 2-build process? I know cordova does it's own fair share of copying and stuff too, and one thing I am worried about is very long build times. I guess I'll just have to make the grunt scripts to be very smart in the syncing - maybe there's some plugins to help with that.

Okay, I will proceed along these lines then for now.

[Kerri Shotts]

Bob,

Well, since I use SASS and Browserify, I don't have a lot of choice in the matter -- if you don't use any additional tools that would need a build step, I can understand not wanting to complicate thing. [I suppose it's not absolutely required, one could use SASS and Browserify within www, but then I'd end up distributing both the build artifact and original source. That's just a waste of space on the user's device.]

You wouldn't technically have to use any extra tool -- you could have a Cordova hook on before-prepare that would do your file copies, but one benefit of gulp and grunt is that they are designed to be fast task runners that work well in code watching and live-reload environments. So, you could have your files copied around whenever a file in src changes, and all have methods of only copying changed files. That said, my gulp tasks have tended to be somewhat naive and I've noticed no long builds.

That said, I don't build a Cordova app on every change. My typical workflow is to have a file watcher on gulp, and then preview the www in chrome, assuming I don't need any plugins. My on-device work is limited to times when I have no other choice (or when testing UX or perf or platform-specific bugs), so I don't usually need a new Cordova build on every code change. I will say that the Cordova build takes much longer than any of my gulp tasks do, so I wouldn't want to have a Cordova build kicking off whenever a file changed.

Grunt has similar plugins for watching code, copying only changed files, etc., so aside from the Cordova build itself, you should be able to get very good results.  

Hope that helps!