JHipster is an open-source code generator that creates a full-stack web application, with Spring Boot on the server side and Angular, React or Vue on the client side. It is the most popular code generation platform for Spring Boot developers, according to GitHub. We use JHipster to start a new web application or a microservice architecture with the backend, the frontend, tests and deployment files already in place. In this article, we generate a full-stack application, add entities, look at the backend and frontend code, and deploy the application.
1. What is JHipster?
JHipster is an open-source development tool for rapidly generating, developing, and deploying full-stack web applications and microservice architectures. It creates a production-ready application by answering predefined questions about the stack to be used and the type of application to be built. The generation process creates files for both the backend and the frontend of the application.
The generated application uses Java (Spring Boot) on the server side (backend) and JavaScript (Angular, Vue or React) on the client side (frontend). It also includes the current versions of the supported technologies.
JHipster also generates features for monitoring, testing, security and database integration. The technologies in the generated application are compatible with each other, so we do not have to check their versions ourselves. The generated code has a clear structure and comments from the start.
JHipster integrates technologies for the backend, the frontend, microservices and deployment, and the most used ones are Spring Boot, Angular, Spring Cloud Gateway and Docker.
Backend technologies
- Spring Boot for application configuration.
- Maven or Gradle configuration for building, testing and running the application.
- Spring security for protecting data.
Frontend technologies:
- Angular, React, Vue or Twitter Bootstrap for building design components.
Microservices Architecture:
- Spring Cloud Gateway for HTTP routing.
- Netflix Eureka for Service discovery.
Deployment Support:
- AWS, Heroku, Kubernetes, Azure, Docker for cloud support.
The full list of technologies that Jhispter implements can be found on the official website.
2. Installating JHipster
JHipster provides 4 options for installation, and any of them works.
- NPM installation is the most common way of working with JHipster.
- JHipster Online is a way to generate an application without installing JHipster.
- Yarn installation is an alternative to NPM installation, but using Yarn instead.
- Using a Docker container.
Let us go through the steps using the NPM installation.
2.1. Prerequisites
We must install Java and Node.js before we use JHipster.
2.2. Installing JHipster
Open the CMD window and run the following command.
npm install -g generator-jhipsterThe command downloads the necessary dependencies and installs JHipster. The download can take some time.
3. Creating a New Project
To create the first JHipster web application, we create a new project directory and run the jhipster command in it.
$ mkdir howtodoinjava
$ cd howtodoinjava
$ jhipsterThe command starts the project generation process.
We answer the questions of the generator, so it creates an application that matches our needs.
We launch the application with the Maven or Gradle commands and open localhost:8080 in the browser to see the generated application. In the application, we can check the authentication and registration process and examine the monitoring data.
4. Generating New Entities
Entities represent the domain objects of the project, such as a customer or an invoice. For each entity we need a database table, a JPA entity, a JPA repository, an HTML view, an Angular router and unit tests, and JHipster generates all of them.
We can create entities in the online JDL Studio, which has a graphical interface. We download the .jdl file, put it in the project /src directory and run the following command.
$ jhipster import-jdl entities.jdlAfter the command finishes, the generated entities appear in the project.
5. Working with the Backend
We open the backend files in an IDE such as IntelliJ and find all the Java files in the directory src/main/java. We can see that the Java files have comments and the project has a proper folder structure, so we can add our backend logic there.
6. Working with the Front End
The directory src/main/webapp contains the UI code. The files depend on the frontend framework (Angular, Vue or React) that we chose when generating the project, but the structure remains similar.
7. Project Deployment
We deploy the project by creating a WAR file and placing it in an application server. The following command packages the application as a WAR file.
$ mvn packageAlternatively, we can dockerize the application and run using the docker.
8. Conclusion
JHipster generates a full-stack application with a Spring Boot backend and an Angular, React or Vue frontend from the answers to a few questions. We created a full-stack application, generated entities, looked at the project structure and deployed the application on the Tomcat web server.
Happy Learning !!
