Introduction

The idea behind this blog article is to generate fast a microservice application with an Oracle JET front end.

Simply put JHipster is a code generation tool, that can generate all sorts of project structure, but I’m more interested in the microservice type of project. Microservices applications usually have a gateway that holds the UI of the application. JHipster can generate such projects using React or Angular.

Sometime a go, I’ve red and article on the Oracle Blog that would be awesome to have JHipster generating the front-end using Oracle JET. Actually, we don’t need that because on long term we will not be able to use only what JHipster generates as UI, we will want more functionalities, more components in the front-end. And when you hear the word components for sure the first thought is Oracle JET, which has a lot of components ready to be used in the UI.

Source

The complete sources can be download from GitHub from branch jhipster-ojet, use url: https://github.com/ciancu/jhipster-oracle-jet/tree/jhipster-ojet

Instructions

So bellow are the instructions on hot to transform a JHipster gateway to use Oracle JET for front-end.

Run command:

jhipster

Select the following options:

• Microservice gateway
• Name: v7gtw
• Port: 8080
• Package name: de.virtual7.gtw
• No service discovery (is easier for this demo)
• JWT authentication
• SQL
• MySQL
• H2 with disk-based persistence
• Yes, with the Ehcache implementation (local cache, for a single node)
• Select ‘Yes’ to generate the Hibernate 2^nd level cache
• Maven
• Nothing on this step
• Angular 6
• Select ‘Yes’ for the SASS stylesheet preprocessor
• For the internationalization support select ‘Yes’
• Select your main language and then the second languages
• I’ve selected English and German
• Don’t select additional testing frameworks
• Select ‘No’ for other generators from marketplace

After some minutes you have the code for a Microservices Gateway, with Angular as front-end technology, Spring Boot, Hibernate, Netflix libraries for back-end.

You could run the project with:

mvnw

Then on http://localhost:8080/# you can access the default Angular front-end.

This can be download from GitHub from branch jhipster-init, use url: https://github.com/ciancu/jhipster-oracle-jet/tree/jhipster-init

Add Oracle JET

To add the Oracle JET front-end you have to create the folder src/main/webapp-ojet. Then you have to copy the .yo.rc file from the root project folder into this src/main/webapp-ojet, to force oracle JET generating the code in this folder, then run the following commands:

npm install -g @oracle/ojet-cli
ojet create gtw --template=navdrawer

After the above commands navigate to the generated folder and install packages using npm:

cd src/main/webapp-ojet/gtw
npm install
ojet serve

Running the application with ‘mvnw’ will bring the application on port 8080 but the Oracle JET serve command is running on another port: 8000.

Adopt Maven and Npm dependencies

You have to adopt pom.xml and package.json, see the differences in the from GitHub commit, https://github.com/ciancu/jhipster-oracle-jet/commit/f124e6f8bfe84d05366774b69f8c76f7b58ea943

 

I’ve replaced, in pom.xml, the webpack build mechanism with the one specific for Oracle JET. And in package.json I’ve removed the angular dependencies and put the Oracle JET dependencies.

 

Now we have to run a clean on the root folder:

mvnw clean

At this stage we have to understand what we have, so we have an ojet project under src/main/webapp-ojet/gtw , from this folder if we run ojet serve is working, but I want the ojet serve to copy from this src/main/webapp-ojet/gtw folder to /target/www/gtw folder. So then when I develop the code is synced in the target folder and I can easily check the code.

The second thing that I have to ensure is the main build is working from the root folder of the application, so I have to provide some oracle jet configuration there that allows the build mechanism to pick the sources from /src/main/webapp-ojet/gtw and but it in the target/www/gtw.

 

The first change is done in oraclejetconfig.json from /src/main/webapp-ojet/gtw, see the git commit here: https://github.com/ciancu/jhipster-oracle-jet/commit/61ecd992b1e2e8bb7b1404b81a43ba90f766d700

 

The second change is to add the /scripts folder and the oraclejetconfig.json also on the root folder of the project so that the maven build scripts will work also. For this see the GitHub commit here https://github.com/ciancu/jhipster-oracle-jet/commit/dc7a410045708e29727c28939de70f646319dcf9

 

If this was executed without error you can to run the application using:

mvnw

After this you will be able to run the Oracle JET front-end in two modes: development and production. The development mode will not use the –release flag and for this you have to execute ‘ojet serve’ command from /src/main/webapp-ojet/gtw folder. Then use the mvnw command from the root to bring up the Spring Boot back-end. The serve command will sync the sources in the target and you can see the changes in the browser during development, in this mode the JS sources are not compacted.

For running the application in production mode you simply have to execure in the root folder:

mvnw -Pprod

Summary

At this point you can consume in Oracle JET any service provided by the gateway or by any of the microservices connected to this gateway.

See the running application screenshot bellow, also you can access it with the following url: http://localhost:8080/gtw/index.html