How to configure npm to use maven folder structure

Question

I began my first pure front end project. I want to deploy it the java/maven. So i set up a normal war project:

│   package.json
│   pom.xml
│   tsconfig.json
│   typings.json
│
│
├───src
│   └───main
│       ├───resources
│       └───webapp
│           │   index.html
│           │
│           ├───app
│           │       app.component.ts
│           │       main.ts
│           │
│           ├───css
│           │       styles.css
│           │
│           └───WEB-INF
│                   web.xml
│

My problem is how to set the path to index.html/the source relative to package. json? Since this is an angular/typescript project there is also some typescript specific stuff. but my hope is to set the "source" path once and for all in package json?!

I am also not sure if i want to deploy the stuff in "webapp" directly since there are Compiling steps. So any advice how to structure a pur front end project for maven/war deployment are welcome.

Answer 1

In order to integrate NPM with Maven, you could make use of frontend-maven-plugin which I think will be a great tool for your compiling steps.

So, in order to configure everything together this how your pom.xml should look like:

<project xmlns="http://maven.apache.org/POM/4.0.0" 
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
                             http://maven.apache.org/xsd/maven-4.0.0.xsd">

    <modelVersion>4.0.0</modelVersion>

    <groupId>group.id</groupId>
    <artifactId>artifact-id</artifactId>
    <version>2.0.14-SNAPSHOT</version>

    <name>Artifact Name</name>

    <packaging>war</packaging>

    <!-- Plug-in definition -->
    <build>
        <plugins>
            <!-- frontend-maven plug-in -->
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>0.0.29</version>
                <configuration>
                    <nodeVersion>v5.10.1</nodeVersion>
                    <npmVersion>3.8.6</npmVersion>
                    <installDirectory>target</installDirectory>
                    <workingDirectory>${basedir}</workingDirectory>
                </configuration>
                <executions>
                    <!-- install node & npm -->
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                    </execution>

                    <!--npm install -->
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>

                    <!-- npm run build -->
                    <execution>
                        <id>npm run build</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

            <!-- Maven WAR plug-in -->
            <plugin>
                <artifactId>maven-war-plugin</artifactId>
                <configuration>
                    <webXml>src/main/webapp/WEB-INF/web.xml</webXml>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

As you can see, first we define the usage of frontend-maven-plugin:

• we use the most recent stable NodeJS version: v5.10.1;
• the most recent version of NPM: 3.8.6;
• since the plugin downloads and installs NodeJS and NPM, one needs to declare the installation directory (installDirectory). I've opted to store everything on Maven's target directory;
• then it's necessary to define one's working directory (workingDirectory), which basically is the directory where our package.json will be. In your case, it will be at the same level as your pom.xml file, so we use ${basedir} for that;

• following, it will be necessary to define the executions: the first two I believe that are quite straightforward; the last one simply assumes that, inside your package.json, there's a script target named build which will, for example, call the browserify command in order to build a bundle.js file:

  "scripts": {
      "build": "browserify src/main/webapp/app.js -o src/main/webapp/modules/bundle.js"
  }
  

  In your case, instead of the app.js, the package.json would interact with your typescript files.

---

Finally, one has the definition of the Maven WAR plugin. The only configuration made was the mention to the location where the web.xml is.

Notice that, by definition, Maven will package everything that's inside src/main/webapp directory. So, if there are any files (or folders) that you'd like to exclude, you should make use of the configuration parameter <packagingExcludes>:

<!-- Maven WAR plug-in -->
<plugin>
    <artifactId>maven-war-plugin</artifactId>
    <configuration>
        <webXml>src/main/webapp/WEB-INF/web.xml</webXml>
        <packagingExcludes>app/**</packagingExcludes>
    </configuration>
</plugin>

The configuration above would exclude the folder app.

Again, this is a starting point. From here, you could play with Maven in order to custom build your application.