Angular Build Process

Owned by Anonymous
Last updated: Apr 28, 2014 by Alec Reynolds (Unlicensed)
3 min read

 

Basic Build

The instructions below are based on the assumption that you're keeping the sitewide and Angular repos separate, as I do.

  1. Clone your Angular repo. Ex: `git clone git@github.com:kalamuna/sage-resource.git sage`
  2. Install Node and NPM if needed. (see https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager or Install Grunt on Ubuntu, on Kalabox, you'll probably need to follow the instructions for Ubuntu to get a newer version of Node than the one that is in the default Ubuntu repositories)
  3. Install Bower, Karma and Grunt if needed via NPM: `sudo npm -g install grunt-cli bower karma`
  4. Run `npm install` and `bower install` from the repo root directory to install dependencies
    1. Bower install will put your front end dependencies into vendor/, where they may then be referenced from build.config.js if you want to add more external .js files.
  5. Create a vhost on your Kalabox that points towards the build/ directory; if you go to your-site.kala/index.html, that should display the Angular app.
  6. Run `grunt watch` while developing; this should pick up file changes while you're in development, assuming you open via file protocol, e.g. `file://localhost/Users/sarah/projects/sage/build/index.html`. If you add a new module (which you probably won't be doing for a while) you'll need to ctrl+c and restart it. Sometimes you may need to reload the page twice for changes to take effect, as it'll cache things. If you use LiveReload that should work fine with this.
  7. You'll get trouble from crossdomain when trying to load remote resources when developing locally. You can either: (1) ignore the errors, in which case you won't have access to those files; (2) run chrome in "disable-web-security" mode: `open -a /Applications/Google\ Chrome.app --args --disable-web-security`. The latter is what I do. Not perfect, should probably fix.
  8. Right now, I have a .bash_sage in the repo root which provides a couple aliases for the only stuff you'll need regularly: (1) compiling the source files when you're ready to push, which just consists of running `grunt build` and `grunt compile` from the Angular repo root; and (2) copying the compiled files (in bin/) to the relevant Drupal directory. You can make and source your own .bash_sage and/or modify the existing to reference some env variables and/or ignore it.
  9. All the relevant stuff for templates, and most of the LESS, is in src/app. The main LESS file is an exception; it's in src/less/main.less. This one contains globals and pulls in all the other files.
  10. src/index.html is not in use on the actual site. It plays the part of the "wrapper" HTML which is provided by Drupal on the actual site.
  11. The app is arranged "logically", rather than by file type. The templates all end in .tpl.html. At times a template will be "magically" included via a directive. This will still be located in a .tpl.html file, and I have tried to name them sensibly, e.g. if you see <div current-search></div> the corresponding template file will be named currentSearch.tpl.html.
  12. The majority of the build process is courtesy of ngBoilerplate; check out the readme for details.

Common Problems

Error concerning angular-ui-router occurs after building your app.

This is a problem with Bower, you can resolve it by performing the following command:

 bower install --save angular-ui-router#0.2.8-bowratic-tedium

If you check /vendor/angular-ui-router/releases, you should see several javascript files there now.

 

Calls to remote endpoints and resources are failing.

Make sure you try opening chrome using the "disable-web-security" flag: `open -a /Applications/Google\ Chrome.app --args --disable-web-security`.