X

Geertjan's Blog

  • December 1, 2015

How to Use JavaScript Libraries in Maven Projects

Geertjan Wielenga
Product Manager

Let's work lay out a structured approach for working with JavaScript libraries in Maven projects. In doing so, I am responding to this question by Brett Ryan in Australia on the NetBeans Users mailing list.

The project discussed below can be found here on GitHub:

https://github.com/GeertjanWielenga/BowerPOM

Here you can see the solution incorporates Bower, together with Maven, i.e., there's a "bower.json" file as well as a "pom.xml" file. In the Bower file you can see that two JavaScript libraries are listed as dependencies:

The ".bowerrc" file is a standard Bower file that specifies the location where the JavaScript libraries will be downloaded. The default provided by the template in the New File dialog in NetBeans IDE 8.1 provides the correct location, shown below:

Both the above files are created via templates in the New File dialog and the default location suggested by the New File dialog puts these files into the same location where the "pom.xml" file is found, that is, the root of the Maven project.

After doing the above, notice the small yellow warning icon on the project icon in the Projects window:

Note: Notice how NetBeans IDE 8.1 shows "Java Dependencies" and "Bower Libraries" in the project view of Java EE Maven projects. That's a really handy feature, being able to see all your dependencies, from the back to the front, in one place, as well as the entry points provided by the RESTful Web Services.

Hover over the icon and notice that NetBeans IDE tells you that the registered JavaScript libraries have not yet been downloaded:

In the Project Properties dialog, notice that you can find JavaScript libraries to be registered by NetBeans IDE in your Bower file:

Right-click on the project node and choose "Bower Install" (or "Resolve Project Problems") and NetBeans IDE will download the JavaScript libraries for you and put them in the location specified in the ".bowerrc" file:

Then drag and drop the JavaScript files you need into the HTML file, as shown below, i.e., you can see the references point to the location specified in your "bower_components" folder, which was created by NetBeans IDE via its usage of Bower:

In this particular example, you have a Java EE application that exposes data from the Sample database and a JavaScript client that consumes and renders the data:

If you're going to play with this specific example, make sure that your application server supports Java EE 7 and that you have started up the Sample database that comes with GlassFish and is shown in the Databases node in NetBeans IDE.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.