Saturday, December 17, 2016

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.

7 comments:

Anonymous said...

"Unfortunately this is not available by default. NetBeans doesn't recognize JET project and shows disabled icon."

Why not use "HTML5/JS Application with Existing Sources" template? In the New projects window.

Andrej Baranovskij said...

I was not aware about it and tested now. You still need to type same properties into wizard, so there is no much advantage using it or copying NetBeans files by yourself. JET CSS is also not corrected, still requires manual change.

Regards,
Andrejus

Anonymous said...

Nope, everything works out of the box... and all you need to provide is the location of the project. If you're copying and pasting 'nbproject' around, you're definitely doing wrong things.

Andrej Baranovskij said...

Nope, it doesnt work out of the box. Yes, you can select "Site Root" and it populates "Project Name" and "Project Directory" - but you can't run application - even after values in Project Properties window are confirmed.

I dont see anything wrong in copying "nbproject" and changing content manually once per app. Changes are trivial and easy to do. If you prefer to use "HTML5/JS Application with Existing Sources" - thats good. More options only better :) I'm not against it :)

Andrejus

Matthew Baldwin said...

Thank you for the blog!

You might want to take a look at this from PM Geertjan Wielenga on getting Yoeman working. He addresses this point directly in the youtube video.

https://blogs.oracle.com/geertjan/entry/youtube_hybrid_mobile_development_with

Just a thought. :-)

Andrej Baranovskij said...

Yes, it is described how to install/configure Yeoman in NetBeans. I like it - this is perfect. I'm also using this approach.

My point is different - I want to run Yeoman separately from command line (this is what I describe in the post) and then re-use generated app in NetBeans. What I found - NetBeans doesnt understand the structure of generated app (see CSS related point).

Regards,
Andrejus

Andrej Baranovskij said...

I have posted update for point 2.

Regards,
Andrejus