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".

Comments:

Thank you!

Posted by guest on July 24, 2014 at 01:53 AM PDT #

Hi ,
can you please help me , I do the same steps but netbeans don't recognize " rpm install " as a command how can I resolve it ?

Posted by Ahlem on September 17, 2014 at 09:30 AM PDT #

Thanks for the post.

Ahlem: Have you nodejs installed and setup in your sys path?

Posted by guest on September 28, 2014 at 08:06 AM PDT #

Hello ,
Yeah I installed node.js but it was not working , I will put at night an article with problems I faced and solve it and other no clue how to solve them :( I really like this framework but we should work more on training , I tried to update your recent article with print screens and more explanation, but I think I missed the above, I will remove it, in fact the problem here is that the old folder structure in angularjs now we've seen, not partial, a new folder structure, so I have faced many problems in trying to understand tutorials, but they work with the old folder structure! ! uh I'll try to understand it and write another article !!

Posted by guest on October 09, 2014 at 07:10 AM PDT #

The AngularJS team update the AngularJS Seed Template on a regular basis. So, yes, tutorials are going to be out of date a lot. However, the purpose of the AngularJS Seed Template is always going to be the same -- to give you a starting point for working with AngularJS. You can save yourself a lot of time if you contact the AngularJS team, and not the NetBeans team, when you have problems with the AngularJS Seed Template.

Posted by Geertjan on October 09, 2014 at 07:35 AM PDT #

Ah ok , I mixed up between what you do as a Java enthusiast and angularjs :)
thank you for the clarification

Posted by Ahlem on October 09, 2014 at 07:52 AM PDT #

I don't know what you mean. All I'm trying to tell you is that the NetBean team does not own the AngularJS Seed Template. Do you understand? The AngularJS team owns the AngularJS Seed Template. It is in their repository, the NetBeans team has no control over the repository where the template for AngularJS Seed is found. Do you understand now?

Posted by Geertjan on October 09, 2014 at 07:54 AM PDT #

Here's a movie to help you, created today: https://www.youtube.com/watch?v=hh9noACh5xE

Posted by Geertjan on October 09, 2014 at 07:58 AM PDT #

Good article, but the solution did not resolve the problem. In my case I had to manually install node.js, msysgit, change PATH in system variables, restart Netbeans. Now it works.

Posted by matrus on October 15, 2014 at 01:46 AM PDT #

Yes, absolutely. If you don't have node.js installed, you cannot use node.js. Etc...

Posted by Geertjan on October 15, 2014 at 01:49 AM PDT #

I guess it would be helpful to know exactly which tools need to be installed in order to get this to work. Your earlier post about the issues between nodejs bower and the NetBeans IDE assumes quite a bit of prior knowledge on my part.
I am just learning Angular and have no experience with NetBeans. Previously, I've been using Chrome DevTools and jQuery to hack at a few pages and apps. So, I am pretty much drowning in the sea of noobness when you talk about these tools.
It would be nice to have a simple, from-scratch, step-by-step path to get any of the samples to work.
I'll keep plugging away, but it's frustrating when I find a tutorial on the web that says, "Build this sample app in five minutes with this tool!" and it doesn't work.
Maybe, when I get it to work, I'll come back and write up what I did.

Posted by Eric M on December 31, 2014 at 04:47 PM PST #

Can you give a clue about what's going wrong, so I can help? Indeed, you do need to install NetBeans and Node.js and Bower.js, if you want to use NetBeans and Node.js and Bower.js. Contact me directly at geertjan dot wielenga at oracle dot com for help, but, please, say very specifically what's not working for you, what it is you're 'plugging away' at, otherwise it's impossible to help.

Posted by Geertjan on January 01, 2015 at 02:50 AM PST #

Hi,

I had no problem setting up NB to run the tabbed app example, but "resolve project problems" failed to remove the "Missing NodeJS Modules" error, even though I'd followed every step carefully... I just had to do sudo npm install gulp-util, and now everything is perfect :-)

Posted by Neil on January 24, 2015 at 03:01 AM PST #

Post a Comment:
  • HTML Syntax: NOT allowed
About

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.

Search

Archives
« February 2015
SunMonTueWedThuFriSat
1
4
8
10
11
17
28
       
       
Today