Where do you put client-side source files when using grunt and maven?

Typically on a Java project using Maven, you place client-side source files in src/main/webapp. This directory includes your html, css, scripts, images, etc.

However, many grunt projects tend to place these files on the root. It's as if Grunt was designed with the idea that your project is the client-side application, not part of a large server-side project, such as using Java with Spring.

Given a Java project using Maven, where would be the best place to put your web-related source files?

Do you place them in src/main/webapp?

Do you make another directory altogether, such as src/web, and then on a build, copy everything to src/main/webapp?

My goal is to make the client-side build tool as transparent as possible. I guess the ideal case is to simply work from src/main/webapp as I have been doing all along - this is pretty unobtrusive to the way my project is currently setup.

However, if I work from src/main/webapp, I know that I will need to distinguish between src and build directories somehow anyway. I'm sure my html files can stay where they are, but there's definitely going to be a conflict of interest here with javascript and css files, and maybe images too.

Does it make sense to literally have a 100% separate source folder from src/main/webapp? Is there a way to do continuous building/copying/syncing of the application as you modify files, from src/web to src/main/webapp? Will this be inconvenient and cause frustrations and problems? Is it slow?

I would like any advice on the subject. Thank you.


Option 1: Put UI resources in src/main/webapp:

This is a quick-n-dirty solution popular on Github. It helps to keep example projects small and concise. In this case, usually people put the package.json, bower.json, Gruntfile.js and .bowerrc in the maven project's root directory, where the .bowerrc says to install components into src/main/webapp/bower_components.

If you have a task that minifies/transforms resources, the transformed resources can go to a new directory like src/main/webapp/dist. Then use something like grunt-usemin to make your app use the resources in the dist directory.

If your application will use a security framework (like, say, Spring Security), you might want all your resources in src/main/webapp so that the security framework can regulate access to those resources. However you can still achieve this using Option 2 by having a grunt task that copies the necessary resources into src/main/webapp.

  • Common approach on GitHub. Keeps everything in one project.
  • The version of files getting served by your server is a copy of those in src/main/webapp, so changing a file in src/main/webapp isn't immediately reflected in your deployed app. To get hot reloading, you need to use something like grunt-contrib-* stuff.
  • Frontend and backend code is all mixed together. Harder for two different teams to work on the code base.
Option 2: Put UI resources in a separate project:

You can achieve better project organization by keeping the UI and backend in completely separate projects. In this case the UI and the maven project would likely be sibling directories.

Then when deploying to a server, you either:

  1. deploy both projects separately (call them myproject-ui and myproject-services). The javascript in myproject-ui makes RESTful service calls to myproject-services/**.
  2. Use a grunt task to copy necessary resources to src/main/webapp, then deploy your (one) project.
  1. The backend and the frontend are separated as much as possible
  2. The frontend maintains the workflow and directory structure found in most client-side example apps, as you mentioned
  3. "Deploying" the UI is a simple matter of creating a symlink from your server's deployment directory to you UI source code. Changing any UI code is automatically reflected in the deployed app.
  4. You can have several different UIs deployed simultaneously (maybe you have myproject-admin-ui and myproject-user-ui). You could hit either one simply by visiting


Need Your Help

How to post to a conversation scope bean or access this bean from a servlet

servlets ejb conversation-scope

The scenario, I have a client website that needs to post data to the server website. During the post, the server open a login page to authenticate the client and after successful authentication sto...

Ajax pagination like twitter with kaminari

ruby-on-rails ruby-on-rails-3 pagination kaminari

Now I am trying to set up ajax pagination like twitter with kaminari.