How To: Maven project to build JavaScript in Eclipse

Here is what I do, and it seems to work okay. I'm using Eclipse Juno SR2 (Java EE for Web Developers), and Maven 3.0.5, right now. (I'm not an expert in either Eclipse or Maven, so I'm sure that there is a more elegant way of doing this. Please let me know!)

We want to have a project structure like the below, as per Maven conventions:

- src
 +-- main
   +-- java
   +-- js
   +-- webapp
     +--  WEB-INF
 +-- test
   +-- java
   +-- js

And then we want to have the web application deployed with a structure like:

- /
 +-- js
 +-- WEB-INF
   +-- classes

The key portion of the Maven pom.xml is in the maven-war-plugin, which copies over the src/main/js files:

        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-war-plugin</artifactId>
            <version>2.3</version>
            <configuration>
                <archiveClasses>true</archiveClasses>
                <webResources>
                    <!-- in order to interpolate version from pom into appengine-web.xml -->
                    <resource>
                        <directory>${basedir}/src/main/webapp/WEB-INF</directory>
                        <filtering>true</filtering>
                        <targetPath>WEB-INF</targetPath>
                    </resource>
                    <resource>
                        <directory>${basedir}/src/main/js</directory>
                        <filtering>true</filtering>
                        <targetPath>js</targetPath>
                    </resource>                        
                </webResources>
            </configuration>
        </plugin>

(I'm using Google App Engine for my projects right now, so the appengine-maven-plugin copies in my java code and other resources.) With this, you should be able to use Maven to build your project. There are other Maven javascript plugins available, for testing and dependencies, etc, but I think that this is the basic functionality.

On the Eclipse side, a couple of things:

• Be sure that use have the JavaScript Project Facet activated.
• Under Project Properties -> JavaScript -> Include Path -> Source tab, click "Add Folder" and select "src/main/js". You can then remove whatever the default path is.
• Under Project Properties -> Deployment Assembly, add your /src/main/js folder, and set the Deploy Path appropriately (from my structure above, I want my javascript to go to "/js".

I can manage my java dependencies and deploy to AppEngine from Maven, or code and debug from Eclipse (after some fiddling around), and it all seems to work. I would like to integrate my front-end js tests with Maven (maybe using javascript-maven-plugin), but that is a task for another day.