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 with multiple sub-projects. 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

Ok hopefully that's clear enough on the file structure. I'm planning to use the maven-grunt-plugin so I can run my grunt commands on the frontend. The front end is basically the same setup as yo angular produces or that's at least the goal. Deploy simply sets up tomcat, and backend holds the Spring 4 restful services/api.

OK so this is were I'm confused and looking for help. I don't know how to get the frontend to work correctly with the backend. Basically I was wondering if there's a way to tell maven to start the Tomcat, and Grunt servers in dev mode so that I can use both of their features to quickly develop my project, and then pulling the min files into the war for the production build. I guess I can't figure out how to make everything play nicely together. I checked out this question which kind of talks about it but I'm still confused:

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

I would love any links to tutorials that address how to use Maven with tomcat, spring, angularjs, and grunt...also bower so I can use it for my frontend package management. I've read several examples, and have seen many discussing on how to use spring with Java EE and jsp. Or using Gradle to do some things I want...but nothing exactly like I'm attempting.

Of course if this is a bad approach let me know. Basically I want to make my subproject as separated as possible while still allowing the developer to import/run from one pom file.

Answer 1

from your question i digged up only two questions

1. How to do continuous development with grunt/bower + tomcat
2. How to deploy for production

1 - Continuous development

The solution i have chosen for that - since you already use api to communicate client <-> server- is to separate completely the two projects.

So what does it mean? for me is to have two different repositories. One for client, One for Server one this way you get few benefits:

• Split the work on the projects (front-end/server-side)
• Easier to maintain
• In case you want to support "API only" For an example, mobile application, and etc..

But - How do they communicate while developing?

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

But - I'll get cross domain if I try to access server-side from client-side from different port? You are right. And here you get the help of grunt and its plugin. grab a copy of grunt-connect-proxy

What is nice about this plugin that it acts as a middleware between grunt server and tomcat server so you ask grunt server for the API but actually grunt is asking tomcat server to answer on that (behind the scenes of course)

2 - Deploy for production

I guess this is a matter of personal preference question. I find the war file extremely big to do upload again and again (even if are able to share lib between all of your tomcat app). The solution I came up with is to do deploy over git.

OK, but I have one big war file. How can I do that?

For me I use a deploy script I wrote in bash. This is what it does:

1. Tag the current source
2. Run mvn clean package war:exploded -P your-prod-profile (this will run test and integration test as well)
3. With the above command you get all your complied project's file in one place, instead of one big war file.
4. Copy all those files (and inner paths) into outside folder (I use another repository for maintenance deployment over git. So basically I have 3 repositories. One for server source, one for client source, and one for server binaries.)
5. Before doing 4 make sure to delete all files and folders (besides .git stuff) from it
6. After 4 do "git add -A"
7. "git commit -a -m 'new production version X"
8. You can mark some tags before and after for allowing easy way of recovering the last code if there was a big bug in the new production
9. Run remote command on server to a.) stop server, b.) pull the last changes from the binary repository, c.) run server again.
10. For me what I did is a symbolic link between tomcat app to an outside folder (the binary repository) so

Hope this will give you some directions,

Bests, Oak