JHipster: the framework suite for modern websites

If you are de­vel­op­ing a web ap­pli­ca­tion today, you have various code gen­er­a­tors and frame­works at your disposal, which save you a lot of work, providing a basis of tools and code for your website. However, it’s not always easy to find these com­po­nents and get them to work together in harmony, while also being a good fit for your site. For this reason, the JHipster team has combined some of the most popular frame­works for front and back end de­vel­op­ment in their platform of the same name. The mix of Spring Boot, AngularJS, Bootstrap and numerous other com­po­nents is com­plete­ly open source and perfectly suited for the creation of modern web ap­pli­ca­tions and mi­croser­vices.

Together with a handful of other de­vel­op­ers, Julien Dubois started the JHipster (short for “Java Hipster”) website. The name stood primarily for the concept of a website generator, since JHipster is meant to unite Java with other web de­vel­op­ment tools. Today, the Framework col­lec­tion targets the en­ter­prise sector in par­tic­u­lar, with a focus on enabling high pro­duc­tiv­i­ty during the de­vel­op­ment process as well as high-quality, ap­pli­ca­tion de­vel­op­ment. A team of more than 15 core de­vel­op­ers and hundreds of con­trib­u­tors are re­spon­si­ble for con­tin­u­ous further de­vel­op­ment. The JHipster code, which is dis­trib­uted with the Apache 2.0 license, is freely available to anyone on GitHub.

JHipster provides solutions for creating and designing on the front end, as well as the necessary tools for back end de­vel­op­ment. For example, Spring Boot provides the perfect basis for gen­er­at­ing a robust Java stack on the server side, which can then be easily connected to various databases, vir­tu­al­iza­tion engines, and mon­i­tor­ing tools, and is linked to the front end through the REST interface. Among others, JHipster supports the following server-side options:

• Databanks: MariaDB, Post­greSQL, Oracle, MySQL, MongoDB
• Vir­tu­al­iza­tion: Docker, Ku­ber­netes, AWS
• Testing en­vi­ron­ment: Karma, Cucumber
• Indexing: Elas­tic­Search
• Caching: Ehcache, In­fin­is­pan
• Mon­i­tor­ing: Prometheus

As far as front end de­vel­op­ment is concerned, JHipster relies mainly on the JavaScript framework Angular.js and the JavaScript library React. Both can be op­tion­al­ly combined with Twitter Bootstrap, the fore­run­ner of the web framework and the al­ter­na­tive web template HTML5 Boil­er­plate. Ad­di­tion­al­ly, JHipster can be extended with the stylesheet language Sass, which sim­pli­fies design using CSS3.

Tools like the code generator Yeoman, the JavaScript module bundler Webpack or the build man­age­ment ap­pli­ca­tions Gulp (for JavaScript) and Maven and Gradle (for Java) ensure the optimal workflow when using these different out-of-the-box solutions.

As the above list shows, the JHipster col­lec­tion is dis­tin­guished by the fact that the in­di­vid­ual com­po­nents are perfectly matched to one another. If you want to program your website with Java, you should def­i­nite­ly consider using the suite. JHipster not only lowers the entry barriers as­so­ci­at­ed with de­vel­op­ment, but sim­pli­fies and unifies the entire pro­gram­ming process – whether during the actual de­vel­op­ment of the ap­pli­ca­tion or sub­se­quent revisions and ex­ten­sions of code. Since JHipster also provides you with the most important tools for de­vel­op­ment, you can save a lot of time by using the framework col­lec­tion.

With JHipster you can also quickly generate a web ap­pli­ca­tion that supports CRUD op­er­a­tions and has a clearly struc­tured source code. Other useful features like user man­age­ment or in­ter­na­tion­al­iza­tion are also available.

After this short in­tro­duc­tion to the concept of JHipster, in the following tutorial you will learn how to install the framework col­lec­tion. We will also explain the first steps to be taken when using the code frame­works.

There are several ways to set up JHipster. For example, you can access the “de­vel­op­ment box”. It is based on Vagrant software and makes JHipster run on a virtual Ubuntu machine. For Docker fans, however, the JHipster container on GitHub might be more in­ter­est­ing, as it provides an image that you can use to run the framework suite within Docker. Of course, the classic, local in­stal­la­tion on your own server is also possible, whereby you can use either npm or Yarn as a package manager. The latter is the choice rec­om­mend­ed by the de­vel­op­ment team, which is why it is also the basis for the in­stal­la­tion process in this JHipster tutorial. This process goes like this:

1. Download the in­stal­la­tion packages for Java SE 8 from the Oracle website and install the runtime en­vi­ron­ment af­ter­wards
2. Download and install the Node.js in­stal­la­tion packages from the provider’s page and install them as well (the JHipster team rec­om­mends a 64-bit version with long-term support (LTS))
3. Install Yarn on your server by following the system-specific in­struc­tions in the in­stal­la­tion directory on the Yarn website

You can now obtain and install the generator ap­pli­ca­tion Yeoman, as well as JHipster itself, through the package manager. To do this, just enter the following commands in sequence:

Once all com­po­nents are installed, you can take your first steps with the JHipster generator and create your first sample project. For this purpose, you first need a home directory (here referred to as “jhipster-example”), where the cor­re­spond­ing files are stored. The same can be created with this simple command line command:

Then navigate to the created directory and execute the JHipster start command:

JHipster has now created the basic framework of your web ap­pli­ca­tion and stored the cor­re­spond­ing code in the created directory. From there, you can start your own server based on Spring Boot. Which command you use depends on which back end design tool you choose. If you choose Maven, use the Maven wrapper built into JHipster to run the server component through the following command:

If you have chosen Gradle, the required command is:

The page provides the standard data for ad­min­is­tra­tor and easy user access:

When you log on to the ad­min­is­tra­tor account, the “Ad­min­is­tra­tion” and “Entities” items are added to the server’s menu bar. You need the former to manage your web ap­pli­ca­tion. The following options are available to you:

• User ad­min­is­tra­tion: In the user ad­min­is­tra­tion, you create, edit, and delete the user profiles that have access to your JHipster ap­pli­ca­tion. Among other things, the dis­tri­b­u­tion of roles is also possible.
• Ap­pli­ca­tion metrics: The metrics section contains in­for­ma­tion about memory usage, incoming http requests, and service and caching sta­tis­tics.
• Ap­pli­ca­tion status: Under “Health” you get a small overview of your ap­pli­ca­tion com­po­nents func­tion­al­i­ty like hard disk space or databases.
• Con­fig­u­ra­tion: Click on the “Con­fig­u­ra­tion” button to open the general settings menu on your JHipster website.
• Audits: Audits provide you with an overview of suc­cess­ful (AU­THEN­TI­CA­TION_SUCCESS) and failed (AU­THEN­TI­CA­TION_FAILURE) login attempts including in­for­ma­tion on time and user.
• Protocol/Logs: Here you get insight into active log mech­a­nisms. You can also define a logging level (warning, in­for­ma­tion, tracking, error, message, etc.).
• API overview: In the API overview, you see all REST in­ter­faces of your ap­pli­ca­tion including the codes for con­trol­ling these APIs (op­tion­al­ly ex­pand­able for each API).
• Database: Finally, the JHipster back end also offers an interface for your databases, which you can use to test and establish the con­nec­tion.

You can also use the “Language” tab to change the language version of your site’s interface.

In the previous step, the second important menu item on the JHipster back end, “Entities” has already been discussed. Through these units, which you can view, edit, or delete at any time (thanks to the CRUD concept already mentioned), you provide input for your databases – and also content input for your project. To create these entities in JHipster, you have several options: The standard solution is the entity sub-generator, which can be operated from the command line. The syntax of this generator is as follows: