JHipster : RAD with Spring Boot and AngularJS

What if we want to build our new app with technology like Spring Boot exhibiting REST APIs with an AngularJS front end? This basically involves 2 steps:

1. Setup the backend app using Spring Boot
2. Setup the frontend app using AngularJS

Setting up these 2 separate environments have their own quirks. Beside of setting up the framework we have to setup some build tools also to manage the dependencies, i.e., Bower, Grunt, Gradle or Maven. So in initial time, we would do mostly setting up the things like logging, security, database, different environments and then get the apps in working state and build on top of it. This requires extra effort and time. The real pain is you have to synchronize between two different technologies like Spring and Angular. Without proper structure, your app and code would go wild in a matter of weeks.

To overcome above issues, we have a new tool or may be a framework (if you like to call it that), which binds Spring Boot and AngularJS in one. It’s JHipster.

JHipster generates a minimal Spring Boot application with AngularJS front end, along with the build tools like Gradle or Maven for Spring Boot and Bower, Grunt or Gulp for AngularJS, configured already, all working seamlessly. It provides us support to build the application for production using Gradle or Maven and minifying and building front-end artifacts using gulp or grunt.

Getting started with JHipster with as easy as issuing command yo jhipster. Let’s see how to get it up and running.

Installing

1. Install node which will also install npm
2. Install yeoman, bower, grunt and gulp using npm install -g yo bower grunt-cli gulp
3. Install JHipster using npm install -g generator-jhipster

Generating the application

1. Create a folder with your app’s name and change into it using mkdir myApp && cd myApp
2. Run the Yeoman generator using yo jhipster
3. Follow up with answering all the questions and you are done as shown in the following image:

Here I’ve selected my database to be PostgreSQL, Spring security as an authentication and authorization system, Gradle as the build tool for the backend, and Grunt as the build tool for the frontend.

JHipster automatically installs all frontend dependencies using npm install && bower install. To get backend dependencies you want to run ./gradlew. One thing to note here is that if it detects Java 7 then it would generate Java 7 compliant code, and if it detects Java 8 then it would generate Java 8 compliant code that uses Lambdas.

Walkthrough

Let’s discover what the JHipster has done for us.

1.  /src/main/java folder contains our Spring code distributed as follows:
   • config folder contains Spring’s configuration.
   • domain folder contains all domain classes that are mapped by Hibernate to our choice of database, in this case, PostgreSQL.
   • repository folder contains all of the Spring Data based repositories.
   • service folder contains all of the @Service annotated class those are transactional.
   • security folder contains all of the Spring Security based implementations like a simple implementation of UserDetailsService.
   • web.rest folder contains all of the REST endpoints which uses Spring MVC’s REST support.
2. /src/main/resources/config/liquibase folder contains Liquibase changeset files. This folder also contains csv files to build initial users and authorities for the application.
3. /src/main/webapp folder contains our AngularJS code described as follows:
   • scripts.component folder contains all of the AngularJS’ artifacts, like filters and services.
   • scripts.app folder contains all of the app’s JavaScript code that includes HTML and Angular Controllers distributed in the various folder like account, admin, entities etc.
   • scripts.components folder contains all of the app’s JavaScript code that includes Angular Services.

Running

As the JHipster sample application here uses Gradle and Grunt, we just need to run the Gradle wrapper and Grunt.

• Execute ./gradlew Gradle wrapper executable file. It would download the correct version of Gradle and run your application by executing default task bootRun. This command will process JS, CSS and Images to by executing Grunt tasks right inside of build.gradle. You will be served with the address http://localhost:8080/
• In another terminal execute grunt and it would start to build all the JS and CSS. You will be served with the address http://localhost:3000 that allows us to reload all of the HTML and JS changes without restarting our application.
• (Optional) To build a jar file and run that jar issue the commands; ./gradlew -Pprod clean bootRepackage. And now just execute java -jar build/libs/*.war –spring.profiles.active=prod.

What we get by default

JHipster by default provides us with 4 user accounts working seamlessly. They are:

1. system: It has ROLE_ADMIN and ROLE_USER access. You can not access this account.
2. anonymousUser: This account is not usable.
3. admin: It also has ROLE_ADMIN and ROLE_USER access. The default password for this account is admin.
4. user: It has just ROLE_USER access. The default password for this account is user.

If we login by admin account then we have access to certain admin level stuff of the application. Here are some screenshots to your interest (These are taken from JHipster official home page, as I was feeling lazy to generate them myself):

Welcome Screen:

Monitoring screen:

 One of the generated forms:

Log management screen:

Next time, we will see how can we generate custom entities and define some relationships between them to facilitate some business logic using Domains, Services, Rest Controllers and AngularJS views. Till then, have a good time.