Rapid web-development with JHipster. Part 1.

Konstantin Markovych
4 min readJan 6, 2021

Nowadays the time is matters that’s why we don’t have to create applications from scratch. But we’re lucky — as Software Developers we have a huge amount of tools that allow increasing software development. Today I’d like to tell you about one of them — JHipster.

In UaStar we’re using JHipster to a fast start and easily maintain a big part of our projects.

And today I’d like to show how simply you can create an Angular application with a Java backend.

What is JHipster

JHipster is a code generator based allows create full-stack web-applications in a simple way.

Using JHipster you can create applications with Angular, React, or Vue.js on the frontend and Spring Boot on the backend. You may even create microservice architecture with flexible data caching and Elastic Search repositories. A detailed list of supported technologies you may find here.

Also, JHipster has JDL — JHipster Domain Language.
Using it, you able to fully describe your basic application:
* name of application;
* which frontend framework to use;
* database (most popular SQL and NoSQL databases are supported);
* supported languages and default lang;
* caching;
* WebSocket
and many more.
Then you may describe your entities, relationships between them, and configure DTO usage and pagination.
You even may describe and generate complex microservice architecture using JDL but it’s out of our topic.

Setup environment

There are many ways to start using JHipster. You may use either an online generator or docker image, but in Uastar we prefer to use JDL Studio and local installation with NPM.

OK let’s set up our development environment. We have to set up the next prerequisites:
1) JDK. It’s recommended to use AdoptOpenJDK builds, as they are open source and free;
2)Node.js LTS 64-bit version from the Node.js website;
3)JHipster: npm install -g generator-jhipster in the command line;
4) Optionally recommended to install Yeoman: npm install -g yo

It’s better to have Git installed. You may do it from git-scm.com. We recommend you also use a SourceTree if you are starting with Git — this is a GUI client for different SCM systems.

Creating a project

Now, when we have done all the preparations, let's go to the JDL Studio and create a configuration for our first application.

When you open https://start.jhipster.tech/jdl-studio/ you’ll see a sample JDL configuration for an application that stores employees by departments and allows them to collect their jobs and tasks.

JDL Studio

Let’s get this config by pressing Ctrl/CMD+S and rename it to jhipster-jdl.jh

$ mkdir employees 
$ mv jhipster-jdl.jh employees
$ cd employees

Now we’ll generate our project from the JDL file:

$ jhipster --import-jdl jhipster-jdl.jh

You’ll see the next message:

Start importing JDL

Let’s select default options with some exceptions (e.g. we prefer to use Postgresql rather than MySQL)

Selected options

At last, you should get something like this

Success message

Congrats! You’ve successfully generated your project :)

Moving forward

Since we have a ready-to-use application, we must run it immediately! ;)
Simply run ./mvnw inside your project it will be built and you will get the next message:

The project has been built and ran

Finally, we open our browser at http://localhost:8080/ and take a look at our application.

Welcome page

Let’s sign in as an admin and switch language:

Logged in as admin with the Ukrainian language

Epilogue

Now, while you exploring the application, I will go and write the next part which will describe how to customize it and work with WebSocket.

If you have any questions do not hesitate to ask me :)

Kostiantyn Markovych
Founder at https://UaStar.dev
cto@uastar.dev

--

--