Thursday 18 February 2016

A Complete Modern Application using JHipster

JHipster is a Yeoman generator for generating complete modern application in Java and JavaScript. By complete it means that client, server and database component are automatically generated and by modern we mean that application can run on multiple platform such as Android OS, Windows OS or iPhone OS and that too in any size screen

JHipster leverage number of technologies such maven build tool, Spring MVC Rest, Spring data JPA on server side. On client side it uses Angularjs. JHipster utilizes the Grunt JavaScript task runner, for building JavaScript and CSS assets and bower as package manager. 

Hipster support conventional database such as MySQL, Oracle, NoSQL database such as MongoDB, Cassandra and  inbuilt database such as H2.

Before we can actually start generating project we need to install Java, Git, Node.js, Bower, Yeoman and Grunt or Gulp

Quick Start 

1.Download and Install Node.js from the the website https://nodejs.org/en/download/ . Download the msi file and run it to install node.js. Npm (Node package Manager comes with this). We will need npm to install other software.

2. Install Yeoman. Yeoman is the scaffolding application generator. Use the below command to install yeoman
npm install -g yo
Additional information on yeoman can be found here http://yeoman.io/

3. Install Grunt. Grunt is a javascipt task runner. With the help of this tool repetitive task like minification, compilation, unit testing etc can be easily done.
npm install -g grunt-cli
Additional information on Grunt can be found here http://gruntjs.com/

4. Install Bower. Bower is a package manger which is responsible for hunting down, fetching and installing correct packages for your application
npm install -g bower
Additional information on Bower can be found here http://bower.io/

5. Create a new directory like myFirstJHipsterApp. Cd to myFirstJHipsterApp and install JHipster from there
npm install -g generator-jhipster

6. Once JHipster is installed we run the below command to to create a JHipster project.  
yo jhipster
JHipster will prompt you for various option as shown below. Select appropriate input.

7. Once JHipster Project is create you can see successful message.

8. Import the project into Eclipse as maven project.
       
9. Before we can actually build the project with Maven we have to made some changes in application-dev.yml. Basically we have to update the password. The credentials in application-dev.yml will be used to connect to database we will be using. The path of the application-dev.yml is /src/main/resources/config/

10. Before we can actually build the project we have to create the database. We can get the name of the database from pom.xml file.

11. For MySQL you can use the below command to create database.(It is assumed that we have MySQL in your machine.)

Create database myFirstJHipsterApp 

12. You are now ready to build the project. Run install goal from maven, you can skip the test for now.

13. After successful build you can navigate to the target folder of your project and run the below command 

java-jarmyfirstjhipsterapp-0.0.1-SNAPSHOT.war-spring.profiles.active=dev

14. If everything is setup correctly you should be able see the local and global url.

15. Your project is now ready. Go to the URL http://127.0.0.1:8080
Note: You can get the URL from previous point. Also note that port may be different for you.

You are all set with a JHipster project.

Note: The aim of this blog is to show quick steps to create a JHipster Project. The intent of this blog is not to answer why part of it. Details on why part can be found from link provided below.

Additional resource on JHipster can be found here

About the author:
Manas Das is a consultant in Systems Plus Pvt. Ltd. Within Systems Plus, he actively contributes to the areas of Technology and Information Security. He can be contacted at manas.das@spluspl.com

5 comments: