Angular 2 quickstart javascript in Netbeans 8.1

This how-to shows how to set up Netbeans 8.1 so you can build and run the current Angular2 quickstart in Netbeans. When I tried out the Angular quickstart I had to spend sometime figuring out what the tools are and how you use them and what type of project you have to make in Netbeans, (probably because of my lack of Node.js experience, and having to set-up a bs-config.json was something I was not expecting. So I created this how-to hoping it makes someone's life a bit easier.

Tools and versions

This how-to was tested using the following tools and versions:
Windows 10
Netbeans 8.1
Java JDK 1.80_91
Node.js v6.2.2 (includes npm 3.9.5)

And the current (06-July-2016) quickstart Angular2 for Javascript, available at https://angular.io/docs/js/latest/quickstart.htm

How-to

Install all the tools:

If you don't already, download and install the tools.

Java JDK: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

Node.js   : https://nodejs.org/en/download/releases/

Netbeans: https://netbeans.org/community/releases/81/

Configure Netbeans

Start Netbeans and go to the "Options" windows. You will find this under "Tools".

In the options window, select the "HTML/JS" tab and go to the "Node.js" settings.

Fill out all the settings in this window:

• "Node Path "must point to the directory where you installed Nodejs and must contain node.exe
• After filling out the Node Path click on the download button, this should download the correct Source files. However I this appears to be optional.
• npm Path will also point to the directory where Nodejs is installed, but it must contain npm.cmd.
• "Express generator" can be left empty, the Angular quickstart does not seem to use this.
  
  

Create the project

Start the new project wizard:

Select as category "HTML5/Javascript" and as project "HTML5/JS Application with Node.js"

Give the project the name used by the quickstart app: "angular2-quickstart".

You do not need to enable Express.

And the only file that needs to be created is the "package.json".



You have now created your project, but there is one last thing to do before you can start following the Angular quickstart. Netbeans created a map "public", which at this point only contain a index.html file. Netbeans expects you to add the public files in this map but the map is not used in the Angular tutorial. So when you create the css, html and js files of the tutorial in this map and run the project as it is now you will get the error "Cannot GET /" when opening the site in your browser. There appear to be two option to fix this:

1. Create a file called "bs-config.json" in the root folder containing the following.
   {
       "server": { "baseDir": "./public",
       "routes": {
               "/node_modules": "node_modules"
           }
       }
   }
   This tells BrowserSync to look in the public map and to reroute any requests for the Node.js files to the submap containing these files. The tutorial files can then be created in the map called "Site Root" or in the public map under "Sources".
   
2. The second option is to remove the public folder and change the project properties to use no "Site Root Folder". The project properties window can be reached by right clicking the project and select properties.
   
   The tutorial files can then be created in folder "Site Root / Sources".
   
   

Netbeans appears to prefer the first method, it will show a warning when the root directory is the same as the "Site Root Folder".

Set-up is ready: time to follow the Angular2 quickstart

At this point the project is set up and you should be able to complete the tutorial in Netbeans 8.1

Note the following:

• After changing the package.json file Netbeans will show a popup asking if you want to download the dependency's. If you want to download the dependency's at a later time you can always right click on the project and select "npm install" there.
  
• After changing the package.json file there will be a option to run the project from Netbeans (so you do not have to open a command prompt). This is available under right click on the project and select "npm Scripts" and then "start".
  

  

Known problems

Public map is called public_html:
You probably selected a "HTML/JS application" when choosing the type of project. Recreate the project as a "HTML/JS application with Node.js" project or create a bs-config.json file in the root folder containing the following:
{
    "server": { "baseDir": "./public_html",
        "routes": {
            "/node_modules": "node_modules"
        }
    }
}

The Netbeans windows in the screenshots do not look (exactly) like your Netbeans windows / menu items are named different:
You are probably using a different version of Netbeans, they do seem to change the IDE (options window) a lot in every version. If you run into a lot of problems configuring Netbeans then try using the same version I am using, or to find a tutorial for your version of Netbeans.