title: What are some techniques for deploying a single page application that depends on a rest api?
body: <p>I'm building a Single Page Application (using AngularJS) that renders data from a REST API call it makes to a legacy system.  This legacy system is very large, written in Java and takes minutes to deploy so we decided it would be more productive to develop the Single Page Application completely separate from the legacy system.  </p>
  
  <p>The problems occurred once we tried to communicate with the legacy system's REST API.  Although both apps were deployed locally to the same host, they were deployed on different app servers so I needed to use different ports when communicating.   But because the SPA was communicating to a REST API on a different port, the browsers prevented my requests to protect against <a href="http://en.wikipedia.org/wiki/Cross-site_scripting" rel="nofollow">Cross Site Scripting</a> attacks.</p>
  
  <p>We found this build tool name <a href="https://github.com/testdouble/lineman" rel="nofollow">lineman</a> (that leverages grunt) that made it easy to proxy http requests.  This got us around the cross site scripting limitation but this was only suitable in development mode.</p>
  
  <p>Now that we've got a proof of concept working, we want to know how we're supposed to deploy these apps together without the proxying.  It's hard for me to find advice on how to do this because Angular doesn't assume you have a backend in the first place and most people that use Angular on the front end aren't using Java in the backend (if that even matters).</p>
  
  <p>We're running into issues like, the context paths of the apps change depending on if they're deployed in prod mode vs dev mode so we've gotta think of clever ways to avoid broken links that work for both modes.  I wonder if/where I took a wrong step here along the way.  Should I avoid developing the SPA on a separate server from the backend?  </p>