Wilson Mar bio photo

Wilson Mar

Hello. Hire me!

Email me Calendar Skype call 310 320-7878

LinkedIn Twitter Gitter Google+ Youtube

Github Stackoverflow Pinterest

Generates all the hippest stacks from an Entity Model


This article describes how to use JHipster to generate a complete set of code using the hippest (lastest, shinest) tools and utilities.

As I describe in my article on code generation, generation of programming code is not new, it’s just become more useful, complete, and thus important over time.


The first commit to https://github.com/jhipster (@java_hipster) by Julien Dubois was on October 21, 2013.

JHipster.github.io JHipster should really be called a project generator and not just a code generator because it generates ALL the code. JHipster creates code for the entire application and DevOps stacks based on entity data models defined in its JDL Studio See video.


lists several competitors:

Sample JHipster apps

Sample apps created using JHipster are mentioned in these sites:

lists apps created by this technology.

lists apps created by this technology.

What is generated will not be exactly what you want, but it gets you going, making use of all the many components of the front-end, back-end, and DevOps tool stacks.

View the sample app generated from default settings:

  1. https://great-big-example-application.herokuapp.com/#/
    was created by Dan Cancro who stored his source at:


    Changing the Language immediately changes titles to that new language chosen.

    Features display data from databases like forms.

    Entities display columns from the database like a spreadsheet.

  2. https://21-points.com is the sample app online URL from the JHipster book.


    Google Page Speed rates the site at 88 for desktop and 78 for mobile. The site got dinged for images not optimized, caching, render-blocking JavaScript, etc.

  3. If you see an alert about invalid security certificate, Add Exception.

    The site is physically hosted at http://health-by-points.herokuapp.com built as described in Matt Raible’s book.

  4. Pull down Accounts to select Register for a full-featured form featuring errors near fields and password strength indicator.


  5. Confirm email and Sign-in to add points, blood pressure readings, and weight. Set preferences. View the history calendar.

  6. View the book pdf, which describes, step-by-step, the 1,157 lines of customization, with JHipster generating 94.5% of all code.


    JHipster v2 mini-book @jhipster_book (published by InfoQ) describes for web developers the combination of AngularJS, Bootstrap, and Spring Boot as used by JHipster. It’s based on Node.js v4.5.0 and JDK 8.

    Notice the person in the logo has Spring Boot and Angular logos tatooed on his neck.

    Product web page

  7. View the JHipster product webpage (in 5 screenshots):


    The website is based on source at

    My commentary while looking at each screen:

    Welcome Screen

    (click image for full-screen image)

    All this was generated.


    (click image for full-screen image)

    Installation of JVM monitoring agents is automatically done, as is the UI.


    (click image for full-screen image)

    Many back-end services are automatically generated, such as log management.

    Admin Forms

    (click image for full-screen image)

    The generator provides several choices for app UI:

    • Bootstrap for “responsive” CSS.
    • HTML5 Boilerplate to avoid inconsistencies among browsers.

    Entity Forms

    (click image for full-screen image)

    In addition to the “Freelancer” UI theme, there are other skins for Bootstrap at bootswatch.com.

    Advantages of this

    PROTIP: The fantastic thing about the app generated is that the technologies underneath are changeable.

    You can choose between any of the popular databases: MySQL, MongoDB, Cassanda, MSSQL, etc

    Today, it’s SPA (Single Page Application) Angular UIs with WebSockets communication to back-end Java Spring microservices.

    BTW, “AngularJs” refers to the Angular1.x framework at AngularJS.org

    #Angular covers the other versions at angular.org:

    • Angular 2 initially was not back-compatible until Typescript.
    • Angular 3 is skipped as a version number.
    • Angular 4 on 2017-03 (backward compatible with Angular 2)
    • Angular 5 on 2017-09
    • Angular 6 on 2018-03
    • Angular 7 on 2018-09

    All Google applications use Angular version equal to the current GitHub’s master branch of the Angular repository.

    ReactJS is being worked on as branch jh-react, moved from https://github.com/hipster-labs until it is added to the JHipster technology stack.

    Third-party Add-on modules

    A marketplace of third-party modules (that act like standard JHipster sub-generators) can access JHipster variables and functions through hook mechanisms before and after Yeoman app generation:

    Still to do

    1. 2FA (Two-factor authentication).

    2. Static pages for fast loading, as with Jekyll?

    3. Shopping cart with Hazelcart + MySQL

    4. Google Maps of geolocation data

    5. Visualizations of app data (using D3.js or http://krispo.github.io/angular-nvd3)

    6. Automatic tuning of configuration parameters.

    7. Comparison of “total cost per app transaction” varying various components.

    8. Twillo and IFTTT integration to send SMS, make calls, etc.

    9. Business rules engine

    10. Ideas from others

    Microservice architecture

    JHipster generates a full fledge microservice architecture that makes use of Netflix’s OSS (Open Source Software). From jhipster.github.io/microservices-architecture

    (Click on diagram for it in a full-sized window)

    Visitors to the website use a modern browser such as Chrome or Firefox.

    In a Gateway server a Zuul Proxy distributes traffic to AngularJS app servers.

    For Access Control apps reference a JHipster UAA (???) server containing user role information.

    Apps reference Ribbon which handles WebSocket calls to servers handling various microservices.

    Hashicorp Consul

    JHipster Registry contains a Eureka server that … and a Spring cloud Config server. These servers are provided by Netflix. They access Git repos.

    The JHipster Console consists of a Elasticsearch database fed by logs ingested by Logstash and displayed by Kibana. Administration of this ELK stack is accessed by a separate browser instance on port 5601 by default. Logs managed make use of default port 5000.

    More on Microservices:

    • https://martinfowler.com/microservices/
    • https://martinfowler.com/articles/microservices.html


See https://jhipster.github.io/installation/

Build dev environment

See https://github.com/jhipster/jhipster-devbox

  1. Install Vagrant.
  2. vagrant up

    ==>  Provider 'virtualbox' not found. We'll automatically install it now...
      The installation process will start below. Human interaction may be
      required at some points. If you're uncomfortable with automatically
      installing this provider, you can safely Ctrl-C this process and install
      it manually.
    ==>  Downloading VirtualBox 5.0.10...
      This may not be the latest version of VirtualBox, but it is a version
      that is known to work well. Over time, we'll update the version that
      is installed.
    ==>  Installing VirtualBox. This will take a few minutes...
      You may be asked for your administrator password during this time.
      If you're uncomfortable entering your password here, please install
      VirtualBox manually.
    ==>  VirtualBox has successfully been installed!
    A Vagrant environment or target machine is required to run this
    command. Run `vagrant init` to create a new Vagrant environment. Or,
    get an ID of a target machine from `vagrant global-status` to run
    this command on. A final option is to change to a directory with a
    Vagrantfile and to try again.

    Use of a vagrant image would not require these actions to setup a dev box:

    • Install Ubuntu 16.04 operating system.
    • Goggle Chrome and Firefox browsers
    • Install OpenJDK (Java Development Kit)

    • Install Ubuntu Make
    • Use Make to install IntelliJ IDEA or Eclipse
    • Install Gulp task runner (build tool) runs under Node/NPM.
    • Install Bower to manage CSS and JavaScript dependencies used in this application.

    • pgAdmin 3
    • messaging system Apache Kafka? (not RabbitMQ as maintained by Pivotal)
    • MySQL Workbench
    • MongoDB client
    • Cassandra DB command line (command cqlsh)
    • Cloud Foundry command line (command cf)
    • Heroku toolbelt command line

  3. Navigate to or create a folder to hold:
  4. Get the repo:

    git clone https://github.com/jhipster/jhipster-devbox --depth=1
    vagrant up

    The response:

    Cloning into 'jhipster-devbox'...
    remote: Counting objects: 17, done.
    remote: Compressing objects: 100% (15/15), done.
    remote: Total 17 (delta 0), reused 13 (delta 0), pack-reused 0
    Unpacking objects: 100% (17/17), done.
  5. Init Vagrant from a repo:

    vagrant up

    The response:

    Bringing machine 'default' up with 'virtualbox' provider...
    ==> default: Box 'bento/ubuntu-16.04' could not be found. Attempting to find and install...
     default: Box Provider: virtualbox
     default: Box Version: >= 0
    ==> default: Loading metadata for box 'bento/ubuntu-16.04'
     default: URL: https://atlas.hashicorp.com/bento/ubuntu-16.04
    ==> default: Adding box 'bento/ubuntu-16.04' (v2.3.7) for provider: virtualbox
     default: Downloading: https://app.vagrantup.com/bento/boxes/ubuntu-16.04/versions/2.3.7/providers/virtualbox.box
    ==> default: Successfully added box 'bento/ubuntu-16.04' (v2.3.7) for 'virtualbox'!
    ==> default: Importing base box 'bento/ubuntu-16.04'...
    ==> default: Matching MAC address for NAT networking...
    ==> default: Checking if box 'bento/ubuntu-16.04' is up to date...
    ==> default: Setting the name of the VM: jhipster-devbox_default_1499751092787_69943
    ==> default: Fixed port collision for 22 => 2222. Now on port 2200.
    ==> default: Clearing any previously set network interfaces...
    ==> default: Preparing network interfaces based on configuration...
     default: Adapter 1: nat
    ==> default: Forwarding ports...
     default: 8080 (guest) => 8080 (host) (adapter 1)
     default: 9000 (guest) => 9000 (host) (adapter 1)
     default: 22 (guest) => 2200 (host) (adapter 1)
    ==> default: Running 'pre-boot' VM customizations...
    ==> default: Booting VM...
    ==> default: Waiting for machine to boot. This may take a few minutes...
     default: SSH address:
     default: SSH username: vagrant
     default: SSH auth method: private key


    Install Vagrant box created on Windows:

    vagrant init jhipster/jhipster-devbox
    vagrant up --provider virtualbox

    On Mac or Linux:

    vagrant init jhipster/jhipster-devbox; vagrant up --provider virtualbox

    The response:

    A `Vagrantfile` has been placed in this directory. You are now
    ready to `vagrant up` your first virtual environment! Please read
    the comments in the Vagrantfile as well as documentation on
    `vagrantup.com` for more information on using Vagrant.
    Bringing machine 'default' up with 'virtualbox' provider...
    ==> default: Box 'jhipster/jhipster-devbox' could not be found. Attempting to find and install...
     default: Box Provider: virtualbox
     default: Box Version: >= 0
    ==> default: Loading metadata for box 'jhipster/jhipster-devbox'
     default: URL: https://atlas.hashicorp.com/jhipster/jhipster-devbox
    ==> default: Adding box 'jhipster/jhipster-devbox' (v4.6.1) for provider: virtualbox
     default: Downloading: https://app.vagrantup.com/jhipster/boxes/jhipster-devbox/versions/4.6.1/providers/virtualbox.box
    ==> default: Successfully added box 'jhipster/jhipster-devbox' (v4.6.1) for 'virtualbox'!
    ==> default: Importing base box 'jhipster/jhipster-devbox'...
    ==> default: Matching MAC address for NAT networking...
    ==> default: Checking if box 'jhipster/jhipster-devbox' is up to date...
    ==> default: Setting the name of the VM: jhipster-sample_default_1499731131841_72127
    ==> default: Clearing any previously set network interfaces...
    ==> default: Preparing network interfaces based on configuration...
     default: Adapter 1: nat
    ==> default: Forwarding ports...
     default: 22 (guest) => 2222 (host) (adapter 1)
    ==> default: Booting VM...
    ==> default: Waiting for machine to boot. This may take a few minutes...
     default: SSH address:
     default: SSH username: vagrant
     default: SSH auth method: private key
  6. Open a browser (Chrome) and go to local server:

    Do this quickly or you’ll see:

    Timed out while waiting for the machine to boot. This means that
    Vagrant was unable to communicate with the guest machine within
    the configured ("config.vm.boot_timeout" value) time period.
    If you look above, you should be able to see the error(s) that
    Vagrant had when attempting to connect to the machine. These errors
    are usually good hints as to what may be wrong.
    If you're using a custom box, make sure that networking is properly
    working and you're able to connect to the machine. It is a common
    problem that networking isn't setup properly in these boxes.
    Verify that authentication configurations are also setup properly,
    as well.
    If the box appears to be booting properly, you may want to increase
    the timeout ("config.vm.boot_timeout") value.
  7. Install Node Node.js to run a development web server and build the project.

  8. Install Yarn (instead of NPM) to manage Node dependencies such that live reload of client-side code (HTML, CSS, TypeScript) works (thanks to Webpack and Browsersync).

    yarn global add yo

    The response I got:

    yarn global v0.27.5
    [1/4] Resolving packages...
    [2/4] Fetching packages...
    [3/4] Linking dependencies...
    [4/4] Building fresh packages...
    success Installed "yo@2.0.0" with binaries:
       - yo
       - yo-complete
    Done in 7.63s.
  9. To use the tools globally, be sure you have in your path:

  10. On Mac or Linux: export PATH=”$PATH:yarn global bin:$HOME/.config/yarn/global/node_modules/.bin”

    Install JHipster using Yarn

  11. Install JHipster

    yarn global add generator-jhipster

    The response:

    yarn global v0.27.5
    warning package.json: No license field
    warning No license field
    [1/4] Resolving packages...
    [2/4] Fetching packages...
    error jhipster-core@1.3.4: The engine "node" is incompatible with this module. Expected version ">=6.9.0".
    error Found incompatible module
    info Visit https://yarnpkg.com/en/docs/cli/global for documentation about this command.
  12. Edit any file and the browser refreshes automatically.


    The first time this appears:

    ? ==========================================================================
    We're constantly looking for ways to make yo better! 
    May we anonymously report usage statistics to improve the tool over time? 
    More info: https://github.com/yeoman/insight & http://yeoman.io
    ========================================================================== (Y/n) 
  13. Type “y” for this response:

    ? 'Allo mac! What would you like to do? 
    Install a generator
    ? Search npm for generators: 
      _-----_     ╭───────────────────────╮
     |       |    │      Bye from us!     │
     |--(o)--|    │       Chat soon.      │
    `---------´   │      Yeoman team      │
     ( _´U`_ )    │    http://yeoman.io   │
     /___A___\   /╰───────────────────────╯
      |  ~  |     
     ´   `  |° ´ Y ` 
  14. Press control+C to exit.

    PROTIP: The “Yeoman workflow” is made up of three types of tools to enhance your productivity and satisfaction when building a webapp:

    • scaffolding tool (yo),
    • build tool (Grunt, Gulp, etc.), and
    • package manager (Bower, npm, etc.)

    Install JHipster

  15. Install JHipster

    yarn global add generate-jhipster

    The response when I did it:

    yarn global v0.27.5
    [1/4] Resolving packages...
    [2/4] Fetching packages...
    error jhipster-core@1.3.4: The engine "node" is incompatible with this module. Expected version ">=6.9.0".
    error Found incompatible module
    info Visit https://yarnpkg.com/en/docs/cli/global for documentation about this command.

    Install JHipster Design Language Studio

  16. Install JHipster Studio within generators-jhipster/generators folder:

    yo jhipster:import-jdl jhipster-jdl.jh

    In future versions:

    jhipster import-jdl

    The response when I did it:

    You don't seem to have a generator with the name “jhipster:import-jdl” installed.
    But help is on the way:
    You can see available generators via npm search yeoman-generator or via http://yeoman.io/generators/. 
    Install them with npm install generator-jhipster:import-jdl.
    To see all your installed generators run yo without any arguments. Adding the --help option will also show subgenerators. 
    If yo cannot find the generator, run yo doctor to troubleshoot your system.
  17. Start the ???

    yarn start
    yarn start v0.27.5
    error Couldn't find a package.json file in "/Users/mac/gits/wilsonmar/jhipster-sample"
  18. Yeoman front-end app generator:

    Maven pull

    Use the embedded Maven wrapper to run:


    The above installs based on the pom.xml:

  19. Sass = “syntactically awesome style sheets”
  20. WebSockets
  21. Browsersync
  22. Spring Data JPA generates JPA repositories automatically
  23. Liquibase from http://www.datical.com/ - the ORM (Object Relation Model) that works with Spring and JPA (Java Persistance) to handle updating database schemas
  24. Elasticsearch for JMX or Graphite reporting

  25. https://webpack.github.io/ to squeeze only those JavaScript functions that are only used. Compiles, minifies, optimizes front-end for hot-reload.
  26. Leaflet.js
  27. http://www.thymeleaf.org/ template engine to generate Web pages server side Replaces JSPs and JSTLs, which are outdated and deprecated

    <h1 th:text="#{title}">Hello, world</h1>
  28. Netflix OSS

    JHipster Registry

    • Eureka - Service registry for load balancing and failover.
    • Zuul - Proxy for dynamic routing, monitoring and security
    • Ribbon - software load balancing for services
  29. Caching

    • Ehcache is the most widely used solution
    • HazelCast is a great alternative, with clustering support!
    • Hibernate 2nd level cache or Spring Caching abstraction


    https://www.youtube.com/watch?v=LERTahPqVjo Eclipse

  30. Edit the .editorconfig file to specify indent_size, etc.

    Run Generator

    PROTIP: One of the great advantages of using a code generator is having different options to do a similar thing.

  31. Create or Navigate to your app’s folder.

    Unlike other Java app generators, Yeoman expects to be in the directory where it creates your project rather than creating it for you.

  32. Initiate generation:

    yo jhipster

    BTW, this same command is used to upgrade as well.

    The generator asks a series of questions (15 or so).

    QUESTION: Is there sample automation to answer questions?

    ? (1/16) Which type of application would you like to create?

    • Monolithic
    • Services ???


    “import-jdl” sub-generator generates a complex entity model using JDL Studio

    “entity” sub-generator generates a complete JPA entity, from database to Angular

    “service” sub-generator generates a Spring business service

    “languages” sub-generator adds languages for i18n (Spanish)

    Configuration files

  33. Run the ci-cd sub-generator to generate configuration files for a number of Continuous Integration systems.

    jhipster ci-cd

    Consult the Setting up Continuous Integration page for more information.

    See https://www.npmjs.com/package/generator-jhipster

    npm generator-jhipster

  34. Zipkin to trace HTTP requests throughout your services
  35. Elastalert to get alerted when an issue occurs

    Examine sample app code


  1. The on-line app is built from a repository in GitHub:




  2. Install Karma


    write unit tests for Angular controllers and directives using


    write integration tests with Protractor: http://www.protractortest.org/#/

  3. To launch your application’s tests, run:

    ./mvnw clean test
  4. Install Scala to run Gatling.
  5. Install Gatling to run performance tests.


    FROM pbesson/jhipster:onbuild
    FROM pbesson/jhipster:onrun

    Generator for Kubernetes

    The Kubernetes generator generates deployment descriptors to deploy into Kubernetes in order to scale horizontally with ease, and adapt to failure scenarios.

    Run in production mode locally

    ./mvnw -Pprod package
    docker-compose -f src/main/docker/mysql.yml up -d
    java -jar target/*.war

    Deploy to Heroku

    JHipster ships with support for deploying to Cloud Foundry, Heroku, Kubernetes, AWS, and Boxfuse.

  6. To Heroku:

    yo jhipster:heroku
  7. View the app in Heroku. For example:


    Build and Deploy to AWS

    Build and Deploy to CloudFoundry


### Customize landing page

Substitute JHipster logo with your own logo.

### PWA

PWA (Progressive Web Apps) so that content loads for off-line usage on Mobile + desktop

Done by un-commenting lines in webpack.common.js and in index.html.

### Material Design

npm install -g generator-jhipster-bootstrap-material-design
   yo jhipster-bootstrap-material-design
? Do you want to install Bootstrap Material design? Yes
Composing JHipster configuration with module bootstrap-material-design
Reading the JHipster project configuration for your module
 conflict bower.json
? Overwrite bower.json? overwrite
  force bower.json
  create src/main/webapp/app/blocks/config/bootstrap-material.config.js
 conflict src/main/webapp/scss/main.scss
? Overwrite src/main/webapp/scss/main.scss? overwrite
  force src/main/webapp/scss/main.scss
 conflict src/main/webapp/content/css/main.css
? Overwrite src/main/webapp/content/css/main.css? overwrite
  force src/main/webapp/content/css/main.css

PROTIP: The vendor.css is before all material-design stylesheets in your index.html

### Add Entity

jhipster entity Foo

Coding to handle entities are generated from JDL code.

JDL is the JHipster Domain Language processed within the JDL Studio.


A “One to Many” relationship would be generated as a list screen by JHipster, which creates all the JPA entities, DTOs, Spring Rest Controllers all the way through to the client side with Angular.

Among Matt’s YouTube videos is this about github.com/mraible/jhipster4-demo The sample entity diagram models a database containing Job History with reference to Language and Departments with a Location consisting of Country, Region.


### Infinite scroll third-party module


### Configure email


### Sprint social connectors


### Charts

https://www.primefaces.org/primeng/#/ PrimeNG UI library for Angular

npm install primeng --save


Developers talk among themselves on Google Forum.

Julien Dubois (@juliendubois)

  • https://www.youtube.com/watch?v=d1MEM8PdAzQ 20 minute tutorial.
  • https://www.youtube.com/watch?v=dzdjP3CPOCs Be Productive with JHipster by Julien Dubois and Deepu K Sasidharan Nov 8, 2016 at Devoxx US
  • https://www.youtube.com/watch?v=dOO-8cAKDu8 What’s new in JHipster in 2016 by Julien Dubois @ Spring I/O 2016

Deepu K Sasidharan (@deepu105) Developer Advocate at XebiaLabs

  • https://github.com/deepu105
  • https://deepu.js.org/jh-slides-v3/#/intro
  • https://www.youtube.com/watch?v=YmEKClTBkUI Building Spring boot + Angular4 apps in minutes
  • https://www.youtube.com/watch?v=nKRpVkba4Ck 2016-Mar at Tata

Matt Raible Matt Raible - (@mraible) https://raibledesigns.com/ https://www.linkedin.com/in/mraible

  • His blog in June 2017 shows how to build a microservices architecture with JHipster 4.5.4. Generate a gateway (powered by Netflix Zuul and the JHipster Gateway), a microservice (that talks to MongoDB), and use Docker Compose to make sure it all runs locally. Then deploy it to Minikube and Google Cloud using Kubernetes.

  • http://sudheerjonna.com/my-books/ PrimeFaces themes and PrimeNG.

  • https://www.youtube.com/watch?v=kkHN2G_nXV0 Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap (Matt Raible) Devoxx FR

  • https://www.youtube.com/watch?v=ZGF4gEM4FuA JHipster 2.7 Blog Demo [20:30]

Ray Tsang - (@saturnism) Technology Architect / Advocate at Google

Yakov Fain - (@yfain) yakovfain.com

Alfredo Rueda‏ @aruedaunsain


-[ ] Stickers for laptop covers -[ ] T-shirts, hoodies -[ ] Coffee mugs

-[ ] Hands-on classes, boot-camp: freecodecamp.com? -[ ] Conference talks -[ ] Webinars for dev managers

-[ ] Marketplace for themes -[ ] Specific ideas for contribution -[ ] Jobs for developers

Talk about it

Chat at



https://www.youtube.com/watch?v=zHtd8qav8kk Jhipster - Introduction, build simple application (Part 1) JHipster learning with Yappy Toy

https://www.youtube.com/watch?v=DcWx_BOugIM Jhipster 4 + Angular 2 | Java web application. MySql. by Vengeance Coding

https://www.youtube.com/watch?v=5CWu4NoMsSk JHipster, the best way to breed a new webapp by Jfokus