How To: Maven project to build JavaScript in Eclipse

Question

How do I configure my pom to have a folder act as the JavaScript build path?

I would like to have developers import the project into eclipse and automatically have the JavaScript root folder in the eclipse build path so that auto-complete and other JavaScript support works.

Answer 1

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.