Thursday Jul 24, 2014

Bower and Node.js in NetBeans IDE

With more and more HTML5/JavaScript/CSS3 frameworks using packaging solutions provided by Bower and Node.js, it can become a bit tricky for you to set up projects... hard to see the forest for the trees sometimes with so many different solutions striving valiantly to help you but tripping each other up in the process. Despite their innovations, it also becomes slightly cumbersome to share projects with team members because each of them need to run Bower and/or Node.js on the command line, before beginning with their programming tasks. Finally, it becomes difficult for NetBeans IDE to bundle HTML5 sample projects efficiently, as described in my earlier blog entry AngularJS Seed, Bower, and NetBeans IDE 8.

However, in the upcoming NetBeans IDE 8.0.1 release, there's a very elegant mechanism that helps bridge the flexibility offered to frameworks by Bower and Node.js with the assumptions one has when getting started with predefined project structures and when working with shared projects.

Let's go through the process, using a daily development build of the pure HTML5/PHP distribution of NetBeans IDE. First, create a new HTML5 application:

Give it a name and location:

Choose the Angular Seed Template:

The above means that a connection is made to the on-line repository where the HTML5 Angular Seed template is found. The team responsible for that template can change it anytime they like, which is exactly what they're doing now and then, by changing the structure of the seed template as well as the libraries it depends on.

On completing the wizard, notice (for the first time in NetBeans IDE 8.0.1) the error badge in the project icon and the project name is in red:

That tells you that some of the dependencies declared by Bower or Node.js or both have not been satisfied.

Right-click and notice 'Npm install' and 'Bower install' can be called directly from here, as well as 'Resolve Project Problems':

When you select that menu item, NetBeans IDE tells you 'hey, there's a bunch of stuff missing, based on analysis of the Bower and Node.js definitions in your project':

When you click "Resolve" above, all the stuff that needs to be added to the project is automatically added, below a very small segment of all the stuff that happens in the background for you is shown:

Now that's pretty cool. Whenever you open any HTML project into NetBeans IDE, i.e., straight via a template like the above, or by opening a project with existing sources on disk, NetBeans IDE will tell you whether Bower or Node.js should be run, and it will then run it for you, and thereby resolve project dependency problems for you... so that you can begin coding really quickly without having to worry about all these messy set up details. 

Also, this makes sharing projects between team members nice and easy. Define your dependencies via Bower or Node.js, pass the project to your team members however you like, and then let NetBeans IDE access the dependencies and add them to the project for you. 

In short, this really feeds in very well to the concept of "Integrated AngularJS Development".


Geertjan Wielenga (@geertjanw) is a Principal Product Manager in the Oracle Developer Tools group living & working in Amsterdam. He is a Java technology enthusiast, evangelist, trainer, speaker, and writer. He blogs here daily.

The focus of this blog is mostly on NetBeans (a development tool primarily for Java programmers), with an occasional reference to NetBeans, and sometimes diverging to topics relating to NetBeans. And then there are days when NetBeans is mentioned, just for a change.


« July 2014 »