Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to configure npm to use maven folder structure and war deployment

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.

like image 943
dermoritz Avatar asked Apr 13 '16 07:04

dermoritz


People also ask

How do I customize a Maven build for different environments?

A Build profile is a set of configuration values, which can be used to set or override default values of Maven build. Using a build profile, you can customize build for different environments such as Production v/s Development environments. Profiles are specified in pom.

What is Maven NPM?

npm is the command-line interface to the npm ecosystem. It is battle-tested, surprisingly flexible, and used by hundreds of thousands of JavaScript developers every day. Apache Maven and npm are primarily classified as "Java Build" and "Front End Package Manager" tools respectively.

What is the use of Maven war plugin?

The WAR Plugin is responsible for collecting all artifact dependencies, classes and resources of the web application and packaging them into a web application archive.


1 Answers

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.

like image 168
António Ribeiro Avatar answered Sep 28 '22 06:09

António Ribeiro