JET Application - Generate with Yeoman - Debug in NetBeans

Let's take a look today how to debug JET application (tested with JET 2.2.0) which is initially generated with Yeoman. We could debug in NetBeans, but by default application generated with Yeoman is not runnable in NetBeans, we need to add manually some config files - I will describe how. Also note - JET application created with NetBeans can't be directly served with grunt from command line, it also would require manual changes in the config. It would be nice if Oracle would make JET applications generated with Yeoman automatically runnable in NetBeans and vice versa.

I would recommend to read Geertjan post on similar topic - Avoiding Hiccups in Building Oracle JET Applications. My point is different though - I describe how to run application generated with Yeoman in NetBeans without using grunt command, to be able to use NetBeans debugger for sources in src folder.

I will go step by step through the process (first I would recommend to go through JET Getting Started):

1. JET application creation with Yeoman and build with Grunt
2. Manual configuration to be able to open such application in NetBeans
3. JET CSS config to be able to run such application in NetBeans

1. JET application creation with Yeoman and build with Grunt

Run command: yo oraclejet basicjetapp --template=basic. This creates simple JET application with one module:

Scripts and various modules are being generated. JET content can be located under src folder - generated application structure:

This is the most simple JET application possible, based on basic template. I have added chart into main page (I'm using Atom text editor to edit JavaScript):

Supporting variables for the chart are created in Application Controller module:

Application Controller module is included into JET main module, where bindings are applied based on Application Controller module and JET context is initialized:

You can build minified JET structure ready for deployment with Grunt command build:release. Navigate to application root folder and run it from there: grunt build:release:

This will produce web folder (name can be changed) with JET minified content:

We could run JET application with Grunt using server:release command: grunt serve:release:

JET application is running:

2. Manual configuration to be able to open such application in NetBeans

---UPDATE 2016-12-27---

You can open JET application generated with Yeoman in NetBeans and after Run - it will display Project Properties window:

Change Start File to point to src folder:

Now you should be able to run JET application in NetBeans, make sure to fix CSS, refer to point 3.

By default NetBeans assigns oraclejet-app name, you can change it:

Same steps can be done manually by editing nbproject folder files, described below.

---END UPDATE---

To debug JET application generated with Yeoman we would need to open it in NetBeans. Unfortunately this is not available by default. NetBeans doesn't recognize JET project and shows disabled icon:

We need to copy manually NetBeans nbproject folder from any other JET application created with NetBeans into our application root folder:

Change project.xml file and update project name property:

Update web context root in project.properties file:

Update application paths in private.xml file:

After these changes, NetBeans can recognize JET application and it can be opened:

JET application generated with Yeoman is successfully opened in NetBeans:

But there is issue when trying to run application in NetBeans - it can't find JET Alta UI CSS. JET is running, but with ugly look:

3. JET CSS config to be able to run such application in NetBeans

JET application generated with Yeoman points to CSS location which doesnt exist in folder structure:

After we run Grunt command grunt build:release it automatically updates CSS location. This is why it works with grunt serve:release:

Things are a bit different for JET application created with NetBeans. JET application created with NetBeans indeed contains JET Alta UI CSS in the folder originally referenced by JET application created with Yeoman:

I copied this folder into JET application generated with Yeoman:

This time JET application runs and displays as it should in NetBeans:

Don't forget to remove duplicate (we need it only to run/debug in NetBeans) JET Alta UI CSS files folder from release if you run grunt serve:release:

Download sample JET application from GitHub directory - basicjetapp.