Geertjan's Blog

  • July 24, 2014

Bower and Node.js in NetBeans IDE

Geertjan Wielenga
Product Manager

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

Join the discussion

Comments ( 18 )
  • guest Thursday, July 24, 2014

    Thank you!

  • Ahlem Wednesday, September 17, 2014

    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 ?

  • guest Sunday, September 28, 2014

    Thanks for the post.

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

  • guest Thursday, October 9, 2014

    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 !!

  • Geertjan Thursday, October 9, 2014

    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.

  • Ahlem Thursday, October 9, 2014

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

    thank you for the clarification

  • Geertjan Thursday, October 9, 2014

    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?

  • Geertjan Thursday, October 9, 2014

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

  • matrus Wednesday, October 15, 2014

    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.

  • Geertjan Wednesday, October 15, 2014

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

  • Eric M Thursday, January 1, 2015

    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.

  • Geertjan Thursday, January 1, 2015

    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.

  • Neil Saturday, January 24, 2015


    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 :-)

  • guest Wednesday, March 18, 2015

    Thanks for adding and pointing out the features that simplify the use of Angular in the HTML-5 project in NB. NB is turning out to be an excellent development environment for JavaScript

  • Sasivarnan Thursday, May 28, 2015

    When NetBeans will get support developing NodeJS applications, as having for support for PHP???

  • guest Tuesday, June 30, 2015

    cant install bower, wheni resolve project issue


  • guest Monday, November 23, 2015

    I had more or less the same problem: Bower wouldn't run and NetBeans reported a notification about being unable to run "%1". Running Bower by hand in the project directory hinted at a git related problem. Running the git command by hand showed that it couldn't connect to github. I changed the protocol from "git:" to "http:" by following the "basic URL rewriting" in http://stackoverflow.com/questions/4891527/git-protocol-blocked-by-company-how-can-i-get-around-that and now I can at least run bower by hand, solving the project problems.

    What was a bit confusing to me was that git was available to NetBeans itself and works, but wasn't available to the spawned bowser command. Probably due to the git: protocol instead of the http: one.

  • mathetes Thursday, August 25, 2016

    NetBeans 8.1 demand to write "Full path of Bower file (typically bower)".

    Is it file of current project bower.json or app Bower

    Same problem with Node.js & gulp

    In my case I have installed node in^


    & npm


    Is it correct ways or I need others?

    What about Bower full path? Where it installed in Ubuntu usually?

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