Web App (Spring, Angular, Grunt, Maven, Tomcat) running both grunt and tomcat servers

Question

OK so I\'ve been reading several of the other stack questions and trying to piece this together without much luck. Basically my approach is that I currently have one project wit

Answer 1

OK so i wanted to post a solution that works well for my local development, and has allowed me to use the desired approach...is to do as Oak stated (sorry I'm not sure how to link his username) and have two separate builds/projects. However, my front-end project uses grunt to serve up my code on a specific port, with some middleware that directs requests on the port to either the front-end code, or to the server running spring-boot. This allows me to act as if the code is really running on the same project and avoid any CORS and other issues from running them on different domains/servers. here's the section of code in my grunt build that allows me to do that:

livereload: {
    options: {
      debug: true,
      middleware: function (connect, options) {
        var middlewares = [];

        middlewares.push(rewriteModule.getMiddleware([
          //Load App under context-root of 'myappcontext/secured'
          {from: '^/napiweb/(.*)$', to: '/$1'},

          //Redirect slash to myappcontext/secured as convenience
          {from: '^/$', to: '/napiweb', redirect: 'permanent'}

          //Send a 404 for anything else
          //{from: '^/.+$', to: '/404'}
        ]));

        if (!Array.isArray(options.base)) {
          options.base = [options.base];
        }

        options.base.forEach(function () {
          // Serve static files.
          middlewares.push(connect.static('.tmp'),
            connect().use(
              '/bower_components',
              connect.static('./bower_components')
            ),
            connect.static(appConfig.app));
        });

        // Make directory browse-able.
        //middlewares.push(connect.directory(directory));

        return middlewares;
      }
    }
  },

Then I configured my spring-boot to have a proxy for local development that forwards specific requests to the front-end. It is set up as follows: in my config.xml file

  
  
  
  
     

       
         xml={{policy-src-xml}}
       
       
         xml={{static-src-xml}}
       
       
         xml={{napi-src-xml}}
       
     
  

 xml={{usr-src-xml}}
 
 

As you can see the cctx mapping will direct some request to the front end being served up on port 9000 and some to the backend serving up the APIs.This is based off the policy-config.xml and static-config.xml files. They are almost exactly the same, and the only difference is in the authHost and cctx setting here's one for an example:

   
   
    
   
   
     
       
         ...profile-att specific for my organization
       
       
         
       
     
  
  
    
      
    
  

The only other difference is the other file has authHost='localhost.somedomain.com/napiweb/' cctx='/napiweb/' This causes the APIs to be called and the front-end to be called as if they are served up from the same project. Then when we push the projects up to our repositories, we have two build cycles. One takes the front end and creates static assets using grunt build and then copies those files over to the rest server so it can serve them up. This allows us to have separate projects for development but a single server serving up our site. Not ideal...as ultimately I think we should have separate servers/instances for the front and back, but since we weren't allowed to do so, this allowed us to act as if we did during development. I hope this helps someone.