package javascript app (that uses grunt & browserify) in war

Question

I have a project that consists of a javascript client app and a maven+spring based REST web service.

The javascript app is built using browserify and grunt. For this reason I am unable to simply place the html/js source in the src/main/webapp directory of my maven based web service project. What really needs to end up in there is the contents of the javascript app's dist directory after browserify/grunt compilation.

Question is: how can I set things up so that the javascript app is packaged w/ the web service war (note that this will need to include the grunt/browserify build steps)?

Answer 1

This is possible by using the frontend-maven-plugin for maven. I use it do these steps during every maven build:

• Downloading and installing Node.js (if it doesnt exist already)
• Update npm packages
• Executing my frontend build (gulp)
• Gulp will compile my SASS and JS to folders specified in plugin

I can also trigger gulp build by changing files. Part of my POM (should work similar for grunt):

        <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>0.0.26</version>
            <configuration>
                <workingDirectory>src/main/frontend</workingDirectory>
                <installDirectory>.</installDirectory>
            </configuration>
            <executions>
                <!-- Config from: https://github.com/eirslett/frontend-maven-plugin -->
                <!-- phase optional for all executions: default phase is "generate-resources" -->
                <!--  disable some of the following executions to improve build speed -->
                <execution>
                    <id>install node and npm</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                    <phase>generate-resources</phase>
                    <configuration>
                        <nodeVersion>v4.1.1</nodeVersion>
                        <npmVersion>3.3.3</npmVersion>
                        <nodeDownloadRoot>https://nodejs.org/dist/</nodeDownloadRoot>
                        <npmDownloadRoot>http://registry.npmjs.org/npm/-/</npmDownloadRoot>
                    </configuration>
                </execution>
                <execution>
                    <id>npm install</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <phase>generate-resources</phase>
                    <configuration>
                        <arguments>install</arguments>
                    </configuration>
                </execution>
                <execution>
                    <id>gulp build</id>
                    <goals>
                        <goal>gulp</goal>
                    </goals>
                    <phase>generate-resources</phase>
                    <configuration>
                        <srcdir>src/main/frontend</srcdir>
                        <outputdir>src/main/webapp/resources</outputdir>
                        <arguments>build</arguments>
                    </configuration>
                </execution>
            </executions>
        </plugin>