Web application (Spring, Angular, Grunt, Maven, Tomcat) on which both grunt and tomcat servers are running

Question

OK, so I read a few other questions on the stack and tried to put this together without much luck. Basically my approach is that I currently have one project with several subprojects. I basically have the following:

root |----backend |----|----src |----|----|----main |----|----|----|----java (individual java files not shown) |----|----|----|----resources |----|----|----|----|----META-INF |----|----|----|----|----|----applicationContext.xml |----|----|----|----webapp |----|----|----|----|----WEB-INF |----|----|----|----|----|----web_servicesConfig.xml |----|----|----|----|----|----web.xml |----|----pom.xml |----deploy |----|----src |----|----|----main |----|----|----|----resources (properties files for tomcat) |----|----pom.xml |----frontend |----|----app |----|----|----angular files |----|----bower_components |----|----|----bower files |----|----bower.json |----|----Gruntfile.js |----|----pom.xml 

Well, hopefully this is clear enough for the file structure. I plan to use the maven-grunt plugin so that I can run my grunt commands on the frontend. The front end is basically the same as the yo angular, or at least the target. Deployment simply installs tomcat, and the backend contains Spring 4 restful services / api.

OK, so it was, I was confused and was looking for help. I do not know how to make the interface work correctly with the backend. Basically I was wondering if there is a way to tell maven to start Tomcat and Grunt servers in dev mode so that I can use both of my functions to quickly develop my project and then pull out mini files in the war to build the assembly, I guess understand how to do everything well together. I checked this question, what talk about it, but I'm still confused:

How to deploy AngularJS application and Spring Restful API service on the same domain / server?

I like any tutorial links that explain how to use Maven with tomcat, spring, angularjs and grunt ... also bower so I can use it to control the frontend. I read a few examples and talked a lot about how to use Spring with Java EE and jsp. Or using Gradle to do some things that I want ... but nothing is exactly the way I'm trying.

Of course, if this is a bad approach, let me know. Basically, I want to make my subproject as divided as possible, while maintaining permission to run / launch one of the pom files.

Answer 1

I dug out only two questions from your question

• How to do continuous development with grunt / bower + tomcat
• How to deploy to production

1 - Continuous Development

The solution I chose for this - since you are already using api to communicate client <-> server - is to completely separate the two projects.

So what does that mean? there are two different repositories for me. One for the client, one for the server, one of these methods gives you several advantages:

• Separate project work (front-end / server-side)
• Easier to maintain
• If you want to support only the "API". For example, a mobile application, etc.

But - How do they communicate during development?

This is a good question: One solution is to run two servers on the local host in parallel, i.e. mvn clean tomcat:run -P yourprofile; grunt server

But - will I get a cross-domain if I try to access the server side from the client side from another port? You're right. And here you get help from grunts and its plugin. take a copy of grunt-connect-proxy

What's good about this plugin is that it acts as middleware between the grunt server and the tomcat server, so you request the grunt server for the API, but actually grunts, asking that the tomcat server responded to this (behind the scenes, of course)

2 - Deployment for production

I think this is a matter of personal preference. I believe the war file is very large to do the download over and over again (even if you can share the lib between your entire tomcat application). The solution I came up with is to deploy on top of git.

Ok, but I have one big war file. How can i do this?

For me, I am using the deployment script that I wrote in bash. This is what he does:

• Mark current source
• Run mvn clean package war: exploded -P your-prod-profile (this will also lead to test and integration)
• Using the command above you will get your entire project file in one place instead of one large war file.
• Copy all of these files (and internal paths) to an external folder (I use a different repository to deploy the service on top of git). I basically have 3 repositories. One for the server source, one for the client source and one for the server binaries.)
• Before executing 4, be sure to delete all files and folders from it (except for this .git)
• After 4 do "git add -A"
• "git commit -a -m" new production version of X "
• You can mark some tags before and after to provide an easy way to recover the latest code if there was a big mistake in the new release.
• Run the remote command on the server c.) Stop the server, b.) Pull the latest changes from the binary repository, c.) Start the server again.
• For me, what I did is a symbolic link between the tomcat application and the external folder (binary repository), so

Hope this will give you some directions,

Bests, Oak

Answer 2

OK, so I wanted to publish a solution that worked well for my local development, and allowed me to use the desired approach ... do it as Dook said (sorry, I'm not sure how to associate his username) and have two separate assemblies / projects. However, my external project uses grunt to serve my code on a specific port, with some middleware that sends requests to the port either to the front-end code or to the server running spring-boot. This allows me to act as if the code really works in one project and does not allow CORS and other problems to run them on different domains / servers. here is the code section in my grunt assembly that allows me to do this:

 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 server for local development, which redirects certain requests to the interface. It is configured as follows: in the config.xml file

 <config proxy-port="{{http-port}}" console-port="1776"> <console-recording sso="true" rest="true" max-entries="100" enable-debug- logging='true'/> <sso-cookie name="wamulator" domain=".somedomain.com" session-timeout-seconds="1800"/> <port-access local-traffic-only="false"/> <sso-traffic strip-empty-headers="true"> <by-site host="localhost.somedomain.com" port="{{http-port}}"> <cctx-mapping thost="127.0.0.1" tport="8081"> <policy-source>xml={{policy-src-xml}}</policy-source> </cctx-mapping> <cctx-mapping thost="127.0.0.1" tport="9000"> <policy-source>xml={{static-src-xml}}</policy-source> </cctx-mapping> <cctx-mapping thost="127.0.0.1" tport="8180"> <policy-source>xml={{napi-src-xml}}</policy-source> </cctx-mapping> </by-site> </sso-traffic> <user-source type='xml'>xml={{usr-src-xml}}</user-source> <proxy-timeout inboundMillis="0" outboundMillis="0" /> </config> 

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

 <deployment at='2013-01-31_16:25:12.205-0700'> <environment id='dev' host='dev.somedomain.com (exposee)'/> <application id='napi-rest' authHost='localhost.somedomain.com/napiweb/api' cctx='/napiweb/api'> <authentication scheme='anonymous' name='Anonymous Authentication'> </authentication> <authorization failure-redirect-url='/denied.html'> <default format='exposee' value='Allow Authenticated Users'> <headers> <success> ...profile-att specific for my organization </success> <failure> <redirect value='/denied.html'/> </failure> </headers> </default> <rule name='Allow Authenticated Users' enabled='true' allow-takes-precedence='false'> <allow> <condition type='role' value='Anyone'/> </allow> </rule> </authorization> 

The only difference is that the other file has authHost='localhost.somedomain.com/napiweb/' cctx='/napiweb/' . This calls the API calls and the external interface, which will be called as if they were sent from the same project. Then, when we push projects to our repositories, we have two build cycles. One takes the front end and creates static assets using grunt build , and then copies these files to the rest of the server so that it can serve them. This allows us to have separate projects for development, but one server serving our site. Not perfect ... since in the end I think we should have separate servers / instances for front and back, but since we were not allowed to do this, it allowed us to act as if we were doing it during development. I hope this helps someone.