title: Separating jhipster back-end and front-end into two projects?
body: <p>I'm trying <a href="https://jhipster.github.io/">jhipster</a> with token-based authentication. It works perfectly.</p>
  
  <p>Now, <strong>I want to run back-end and front-end code on different domains</strong>. How can I do this?</p>
  
  <hr>
  
  <p>This is what I tried:</p>
  
  <ol>
  <li><p><strong>Run <code>yo jhipster</code> and select token-based authentication option:</strong></p>
  
  <pre><code>Welcome to the JHipster Generator
  
  ? (1/13) What is the base name of your application? jhipster
  ? (2/13) What is your default Java package name? com.mycompany.myapp
  ? (3/13) Do you want to use Java 8? Yes (use Java 8)
  ? (4/13) Which *type* of authentication would you like to use? Token-based authentication (stateless, with a token)
  ? (5/13) Which *type* of database would you like to use? SQL (H2, MySQL, PostgreSQL)
  ? (6/13) Which *production* database would you like to use? MySQL
  ? (7/13) Which *development* database would you like to use? H2 in-memory with Web console
  ? (8/13) Do you want to use Hibernate 2nd level cache? Yes, with ehcache (local cache, for a single node)
  ? (9/13) Do you want to use clustered HTTP sessions? No
  ? (10/13) Do you want to use WebSockets? No
  ? (11/13) Would you like to use Maven or Gradle for building the backend? Maven (recommended)
  ? (12/13) Would you like to use Grunt or Gulp.js for building the frontend? Grunt (recommended)
  ? (13/13) Would you like to use the Compass CSS Authoring Framework? No
  
  ...
  
  I'm all done. Running bower install &amp; npm install for you
  ^C
  </code></pre></li>
  <li><p><strong>Make two copies of the project as <code>jhipster/backend</code> and <code>jhipster/frontend</code></strong></p></li>
  <li><p><strong>Delete unnecessary files from back-end and front-end</strong></p>
  
  <pre class="lang-bash prettyprint-override"><code>rm -rf backend/.bowerrc
  rm -rf backend/.jshintrc
  rm -rf backend/bower.json
  rm -rf backend/Gruntfile.js
  rm -rf backend/package.json
  rm -rf backend/src/main/webapp
  rm -rf backend/src/test/javascript
  
  rm -rf frontend/pom.xml
  rm -rf frontend/src/main/java
  rm -rf frontend/src/main/resources
  rm -rf frontend/src/test/gatling
  rm -rf frontend/src/test/java
  rm -rf frontend/src/test/resources
  </code></pre></li>
  <li><p><strong>Make changes in code to completely remove backend/frontend dependency</strong></p>
  
  <ul>
  <li><p><code>frontend/Gruntfile.js</code></p>
  
  <pre class="lang-js prettyprint-override"><code>...
  var parseVersionFromPomXml = function() {
      return '1.2.2.RELEASE';
  };
  ...
  browserSync: { ..., proxy: "localhost:8081" }
  </code></pre></li>
  <li><p><code>frontend/src/main/webapp/scripts/app/app.js</code></p>
  
  <pre class="lang-js prettyprint-override"><code>angular.module('jhipsterApp', [...])
  .constant('API_URL', 'http://localhost:8080/')
  .run( ... )
  </code></pre></li>
  <li><p><code>frontend/src/main/webapp/scripts/**/*.service.js</code></p>
  
  <pre class="lang-js prettyprint-override"><code>angular.module('jhipsterApp').factory(..., API_URL) {
      return $http.post(API_URL + 'api/authenticate', ...);
  }
  
  angular.module('jhipsterApp').factory('Account', function Account($resource, API_URL) {
      return $resource(API_URL + 'api/account', {}, {...});
  }
  
  // Make similar changes in all service files.
  </code></pre></li>
  <li><p><code>backend/pom.xml</code></p>
  
  <p>Remove yeoman-maven-plugin</p></li>
  <li><p><code>backend/src/main/java/com/mycompany/myapp/SimpleCORSFilter.java</code></p>
  
  <pre class="lang-java prettyprint-override"><code>// Copied from here: https://spring.io/guides/gs/rest-service-cors/
  
  @Component
  public class SimpleCORSFilter implements Filter {
      public void doFilter(...) {
          ...
          response.setHeader("Access-Control-Allow-Origin", "*");
          ...
      }
  }
  </code></pre></li>
  </ul></li>
  <li><p><strong>Run</strong></p>
  
  <ul>
  <li><p>Terminal Tab #1: <em>BACKEND</em></p>
  
  <pre class="lang-bash prettyprint-override"><code>cd backend
  mvn spring-boot:run
  
  ...
  [INFO] com.mycompany.myapp.Application - Started Application in 11.529 seconds (JVM running for 12.079)
  [INFO] com.mycompany.myapp.Application - Access URLs:
  ----------------------------------------------------------
          Local:          http://127.0.0.1:8080
          External:       http://192.168.56.1:8080
  ----------------------------------------------------------
  </code></pre></li>
  <li><p>Terminal Tab #2: <em>FRONTEND</em></p>
  
  <pre class="lang-bash prettyprint-override"><code>cd frontend/src/main/webapp
  npm install -g http-server
  http-server
  
  Starting up http-server, serving ./ on: http://0.0.0.0:8081
  Hit CTRL-C to stop the server
  </code></pre></li>
  <li><p>Terminal Tab #3: <em>GRUNT</em></p>
  
  <pre class="lang-bash prettyprint-override"><code>cd frontend
  bower install
  npm install
  grunt serve
  
  ...
  [BS] Proxying: http://localhost:8081
  [BS] Access URLs:
   -------------------------------------
         Local: http://localhost:3000
      External: http://10.34.16.128:3000
   -------------------------------------
            UI: http://localhost:3001
   UI External: http://10.34.16.128:3001
   -------------------------------------
  </code></pre></li>
  </ul></li>
  <li><p>Browse <a href="http://localhost:3000/#/login">http://localhost:3000/#/login</a></p>
  
  <p>Enter <code>username:password</code> as <code>admin:admin</code></p>
  
  <p>Our <em>BACKEND</em> tab reads:</p>
  
  <pre><code>[DEBUG] com.mycompany.myapp.security.Http401UnauthorizedEntryPoint - Pre-authenticated entry point called. Rejecting access
  </code></pre></li>
  </ol>
  
  <hr>
  
  <p>Apparently, I'm doing something wrong. What is it?</p>