{"id":1683,"date":"2014-09-17T06:31:59","date_gmt":"2014-09-17T12:31:59","guid":{"rendered":"http:\/\/www.mooreds.com\/wordpress\/?p=1683"},"modified":"2014-08-30T06:32:51","modified_gmt":"2014-08-30T12:32:51","slug":"preparing-your-angularjs-app-for-deployment","status":"publish","type":"post","link":"https:\/\/www.mooreds.com\/wordpress\/archives\/1683","title":{"rendered":"Preparing Your AngularJS App for Deployment"},"content":{"rendered":"
\"angle
Photo by kevin dooley<\/a> \"\"<\/a><\/small><\/figcaption><\/figure>\n

I have recently been working on an AngularJS CRUD front end to a REST API (built with DropWizard).\u00a0 I have been working off the angular-phonecat<\/a> example app (from the tutorial<\/a>).<\/p>\n

After making a few changes, I wanted to deploy the app to a standalone web server (Apache2).\u00a0 I naively checked out the codebase on the web server, and visited index.html.<\/p>\n

I saw a blank screen.\u00a0 Looking in the console, I saw this error message: ReferenceError: angular is not defined<\/code><\/p>\n

Whoops.<\/p>\n

“Looks like there’s more to deploying this application than I thought.”\u00a0 Some searching around doesn’t reveal a lot, maybe because deployment is just taken for granted in the AngularJS community?\u00a0 Or I don’t know what questions to ask?<\/p>\n

Regardless, the fundamental fact of building AngularJS apps for deployment is that, at least with the angular-phonecat base, your dependencies are managed by bower<\/a> and\/or npm<\/a>, and you need to make sure you bundle them up when you are running on a web server that isn’t the npm started web server.<\/p>\n

In practice, this means writing a Gruntfile (or, actually, modify this Gruntfile<\/a>), which is similar to an ant<\/a> build.xml file–you write targets and then gather them together.<\/p>\n

For my initial Gruntfile, I wanted to make things as simple as possible, so I stripped out some of the fanciness of the g00glen00b file.\u00a0 In the end, I had two tasks:<\/p>\n

    \n
  1. bowercopy<\/a> to\u00a0 copy my bower dependencies to a temp directory.\u00a0 I tried to use the bower grunt task<\/a>, but wasn’t able to make it work.<\/li>\n
  2. compress<\/a> to gather the files and build the zip file<\/li>\n<\/ol>\n

    These were bundled together in a ‘package’ task that looked like this: grunt.registerTask('package', [ 'bowercopy', 'compress:dist' ]);<\/code><\/p>\n

    The compress task is complicated and took some figuring out (this post was helpful<\/a>, as was a close reading of the task’s readme page<\/a> and the page detailing how file objects can be dynamically generated<\/a>). Here’s an example of the dist task:<\/p>\n

     compress: {\r\n          dist: {\r\n            options: {\r\n              archive: 'dist\/<%= pkg.name %>-<%= pkg.version %>.zip'\r\n            },\r\n            files: [{\r\n              src: [ 'app\/index.html' ],\r\n              dest: '\/',\r\n              expand: true,\r\n              flatten: true\r\n            }, {\r\n              cwd: 'dist\/libs',\r\n              src: [ '**' ],\r\n              dest: 'bower_components',\r\n\t      expand: true,\r\n            },\r\n              \/\/ ... more files definitions \r\n            ]\r\n          }\r\n  }<\/pre>\n
    I want to unpack this a bit. First, the options object specifies an archive file and the name of the file. You can see that it is dynamically created based on values from the package.json (which is read in earlier in the grunt config file).<\/p>\n
    Then, the set of files to be added to this archive is specified. The src<\/code> attribute outlines the list of files to include in the zip file. src<\/code> handles wildcards (* for all in the directory, ** for all in the directory and subdirectories). The dest<\/code> attribute, in contrast, indicates the directory where the file is to land in the zip archive. The expand<\/code> attribute lets grunt do dynamic file matching (more here<\/a>). The flatten<\/code> attribute removes all the leading paths from the source files–if you didn’t have flatten:true<\/code> in the index.html<\/code> entry, it would be placed at \/app\/index.html<\/code> in the zip file. The dist\/libs<\/code> entry handles all the dependencies that were copied to that tmp directory by the bowercopy<\/code> task. What the cwd<\/code> attribute tells grunt is to act like it is in that directory for the src<\/code> attribute. So, a file at dist\/lib\/foo\/bar<\/code> will be treated like it was foo\/bar<\/code> and, in the task above, copied to bower_components\/foo\/bar<\/code> in the zipfile. This allows one to maintain the same directory structure in my index.html<\/code> file in both dev and production.<\/p>\n
    Finally, you need to install grunt and run grunt package<\/code> to get your zipfile with all dependencies, for deployment.<\/p>\n
    There are a lot of other beneficial changes grunt can make to your app before deployment, like concatenating css and minifying the javascript, and I encourage you to read this post<\/a> for more information, but this was enough to get the app running in an environment without npm or any of the other angularJS toolchain.<\/p>\n","protected":false},"excerpt":{"rendered":"
    I have recently been working on an AngularJS CRUD front end to a REST API (built with DropWizard).\u00a0 I have been working off the angular-phonecat example app (from the tutorial). […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67,54],"tags":[],"class_list":["post-1683","post","type-post","status-publish","format-standard","hentry","category-angularjs","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/posts\/1683","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/comments?post=1683"}],"version-history":[{"count":5,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/posts\/1683\/revisions"}],"predecessor-version":[{"id":1692,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/posts\/1683\/revisions\/1692"}],"wp:attachment":[{"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/media?parent=1683"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/categories?post=1683"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/tags?post=1683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}