Introduction to JHipster: a full-stack framework for Java and JavaScript

JHipster is an ambitious, long-running hybrid Java and JavaScript project dedicated to making it easier to develop full-featured Java applications using modern responsive front-ends. The JHipster development team has constantly released new versions to keep up with industry changes. Let’s learn what this framework can do by building a simple application.

What is JHipster?

Out of the box, JHipster supports React, Vue, and Angular for the front-end. It supports other frameworks, including Svelte, through plugins called blueprints. In the back, Spring Boot does the heavy lifting. In this regard, JHipster is similar to the Hilla framework, but with a more ambitious goal of supporting a wide variety of front-end stacks. At its core, JHipster is an advanced build tool that unifies Java and JavaScript build toolchains and overlays various administrative capabilities.

In addition to full applications, JHipster supports building microservices components and has scaffolding for JPA-based relational data stores and NoSQL data stores such as MongoDB and Cassandra. It also has logging and analysis features.

JHipster’s toolset includes a command line and domain-specific language (DSL) with a visual data modeler and one web based builder (think Spring Initializr on steroids). We’ll use the command line to start. Note that you will need a system with fairly recent Java, Node.js and Git versions installed.

The JHipster sample application

Follow the JHipster Quickstart to install the generator-jhipster npm package and create a new directory to run the generator.

You will see an interactive prompt similar to the one shown in Figure 1.

The generator-jhipster constructor. IDG
Figure 1. The generator-jhipster interactive constructor

You can accept most of the defaults, but for this example we’ll use MongoDB as the database and React as the front-end framework (choose the Bootswatch theme that reflects your mood). Once you set these options, JHipster will do its thing and leave you a new application in the directory you just created.

Build and run the app

JHipster has now generated both halves of a complete Java and JavaScript application. The back-end is built with Maven and the front-end is built with webpack. You can run both halves simultaneously to start the application. (Remember that you also need MongoDB to run in the background.)

In a shell, enter: ./mvn -P-webapp. This command will create and run the Java back-end. We use the -P-webapp flag to prevent Maven from running the webpack part of things.

In another shell, enter: npm start. This command builds the frontend and runs it in Webpack’s development mode, with the API calls pointed to the Java server you just started.

If all went well, you will be greeted at localhost:8080 with a screen similar to the one shown in Figure 2.

Starting a new JHipster application. IDG
Figure 2. The JHipster welcome screen

Create a test user

If you dig into the app, you’ll quickly find that there’s a lot here. JHipster’s generator produces much more than your typical tool, including functional user management and a JWT-based authentication system. The application also has default accounts, which we will use to create a test user.

To start, use the Register option at the top right of the app screen to create a new user. Then create a test user (test@test.com), then navigate to connection and select the default administrator/administrator user. Access the user management screen (Administration -> User Management). Note that your new user is listed. You can activate the user by switching the inactive button to active, then log in as a test user. Note that this user cannot access the administration console.

Like I said, it’s a lot of features out of the box, especially considering that JHipster not only supports the React stack and MongoDB, but also Angular, Vue, and a host of datastores. SQL and NoSQL.

Explore the code

To support all of these features, as you can imagine, JHipster has put together quite a bit of code. Fortunately, it’s largely up-to-date and follows programming best practices. For example, React code uses functional components, leverages hooks, and runs on a centralized Redux store.

Take a look at the application directory and you will see a structure like this:

  • /foundry-jhipster/
    • /webpack/ : Config/utils for webpack bundle
    • /src/main/
      • /java/ : java sources
      • /webapp/ : Frontal sources
    • /target/ : Output directory for both builds
      • /webapp/ : Front construction output
      • /java/ : Release of the back-end version
      • /docker/ : files to support containerization

The main class of the Java application is src/main/java/com/mycompany/myapp/JhipsterApp.java. It is a Spring Boot web application at heart and can be configured with command line arguments via --spring.profiles.active=your-active-profile.

The out-of-the-box Java application is basically the API for CRUD (create, read, update, and delete) user functions with authentication and authorization enforcement through Spring Security. The Spring Security system is configured in /myapp/security. Remember that JHipster uses JSON Web Token, so the classes to support which are in /security/jwt.

The application’s domain models are defined in /domainwhich is the counterpart of the frontal /entities directory which you will see shortly.

Find available frontend scripts by looking at package.json. In addition to dev mode command we are using right now, other features include a mongodb prune ordering, testing and production generation orders.

The customer entrance is at /src/main/webapp/index.htmlbut the real work begins in /sec/main/webapp/app/app.tsxwhich defines the application’s router (routes are defined in router.tsx) that will host the various components of the page.

You can find the application web page components defined in main/webapp/app/modules; for example, /home/home.tsx has the definition of the home page.

In the /main/webapp/app/shared directory, you will find the code used in the application. Much of it is dedicated to the central store, such as model definition and reducers. Currently the application only deals with users, so only these components and the authentication code live in the shared directory.

The /entities folder contains the code to support your modeled entities. Note however that the user model is stored in the shared directory. There are no entities yet, so let’s add some.

Defining a model: JDL and JDL-Studio

JDL is JHipster’s domain-specific language for defining application models. It does much more than that – you can define an entire application with JDL metadata – but we’ll focus on the model.

To start, let’s use JDL Studio, JHipster’s online tool, to quickly generate CRUD features for a domain model. You will see an Entity Relationship Builder like the one shown in Figure 3.

The jhipster constructor. IDG
Figure 3. The JDL constructor

The JDL generator supports the definition of entities and their properties, as well as the relationships between them. We won’t dive into the syntax here because it’s pretty self-explanatory. You can explore the syntax by making changes to the definition on the left and seeing how they are expressed in the visual display.

Let’s accept the given relations and export them by pressing the Download this JDL source button at the top right of the screen. (Note that there are several options on the toolbar to configure the appearance and behavior of items.)

Once you have the file, navigate to your command line in the root of the project and type jhipster jdl my-jdl-file.jdlwhere my-jdl-file.jdl is the name of the file you just exported.

The prompt will ask if you want to overwrite some files. Go ahead and do it. Once that’s done, you can restart the servers and see what you’ve added to the app. Go back to the browser and open the app again on port 9000, and login as administrator/administrator.

Now when you open the Entities menu item in the navigation bar, you get all the entities you just imported, along with a fully realized console to manage them. For example, you can create a new “Country” entity, then create a new “Location” entity and use the newly created country in your location. Note that all CRUD features are present as well.

API monitoring and administration

A few additional features for admin users are worth noting. The Administration the menu includes a Metric option that gives an overview of the characteristics of the running JVM, as shown in Figure 4. See the JHipster documentation to learn more about its monitoring features.

Monitoring JVM metrics with JHipster. IDG
Figure 4. Monitoring a JHipster application with JVM metrics

JHipster also generates OpenAPI/Swagger definitions for its back-end endpoints, along with a simple console to interact with them. Figure 5 shows the API administration screen.

Interact with JHipster terminals. IDG
Figure 5. Interacting with core endpoints through the API admin screen

JHipster offers all of this with a flexible architecture that allows for different datastores and front-end frameworks. All in all an impressive setting.

Copyright © 2022 IDG Communications, Inc.

Comments are closed.