What is JHipster?
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 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 npm generator-jhipster package and create a new directory to run the generator.
You will see an interactive prompt similar to the one shown in Figure 1.
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
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.
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 (email@example.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:
/webpack/: Config/utils for webpack bundle
/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
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
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.
/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.
/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 get started, 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 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 provides an overview of the characteristics of the running JVM, as shown in Figure 4. See JHipster’s documentation for more information on its monitoring features.
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.
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.