JHipster - The Fastest Way To Build A Production-Ready Angular & Spring Boot Application
Tags: angular, java, spring, jhipster
Published: 2019-09-23 08:14:22

---
title: JHipster - The Fastest Way To Build A Production-Ready Angular & Spring Boot Application
published: true
tags: #angular, #java, #spring, #jhipster 
canonical_url: https://www.mokkapps.de/blog/jhipster-the-fastest-way-to-build-a-production-ready-angular-and-spring-boot-application/
cover_image: https://i.imgur.com/IkiPwLA.png
---

The last years I mainly worked on the frontend part of web & mobile applications but I also did some minor backend work. Since mid of this year, I am working to improve my backend knowledge and started to focus on Java backend development using Spring Boot.

As I watched multiple Java tutorials on [Pluralsight](https://www.pluralsight.com/) I stumbled upon [JHipster](https://www.jhipster.tech/) and felt immediately in love with it.

In this article, I will tell you why I love JHipster and how you can quickly start a JHipster project.

## What Is JHipster?

> JHipster is a development platform to generate, develop and deploy Spring Boot + Angular / React / Vue Web applications and Spring microservices.

Basically, it is a [Yeoman](http://yeoman.io/) generator which creates applications that include Spring Boot, Bootstrap and Angular (or React or Vue).

Julien Dubois started the project in 2013 and is available on [GitHub](https://github.com/jhipster/generator-jhipster).

If you like to see JHipster in action, I can recommend the following screencast from [Matt Raible](https://twitter.com/mraible):

<iframe src="https://www.youtube-nocookie.com/embed/uQqlO3IGpTU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          "></iframe>

## Why Should I Use JHipster?

In my opinion, JHipster is amazing as it

- is open source
- supports React, Vue, Angular for the frontend
- uses TypeScript for each frontend framework
- uses Spring Boot 2.1 so we can develop our application in Java 11+
- provides out-of-the-box user management including email verification and password reset
- can be easily deployed to CloudFoundry, Heroku, OpenShift or AWS
- provides a robust microservice architecture using Netflix OSS, Elastic Stack, and Docker
- uses powerful tools Yeoman, Webpack and Maven/Gradle
- has a good test coverage for entities on frontend and backend side

## Quick Start

### Install Prerequisites

Make sure to install [Java](http://www.oracle.com/technetwork/java/javase/downloads/index.html), [Git](https://git-scm.com/) and [Node.js](https://nodejs.org/) which are prerequisites for JHipster.

Then we can install JHipster as global npm package: `npm install -g generator-jhipster`

### Create New Project

Now we can create a new project and get started:

The first step, is to create a new directory and go into it`mkdir jhipster-demo && cd jhipster-demo`

Now we can run `jhipster` which starts the generator

[![JHipster Generator](https://www.mokkapps.de/static/8ef0d28e47f07350109c0890378410b6/36727/jhipster-generator.png "JHipster Generator")](/static/8ef0d28e47f07350109c0890378410b6/410aa/jhipster-generator.png)

with the following selections:

[![JHipster Generator Selection](https://www.mokkapps.de/static/ffc5d10388882248af8abce55015ead3/36727/jhipster-generator-selection.png "JHipster Generator Selection")](/static/ffc5d10388882248af8abce55015ead3/07529/jhipster-generator-selection.png)

I chose a monolithic application as a microservice architecture would be an overkill for a simple demo project. Besides that, I selected Angular as frontend framework with i18n support and some backend configuration for database, caching and monitoring.

Next step is to model our entities with [JDL Studio](https://start.jhipster.tech/jdl-studio/) and download the resulting `jhipster-jdl.jh` file:

[![JDL Studio](https://www.mokkapps.de/static/e40a3839203db445db13937bb91d7c1b/36727/jdl-studio.png "JDL Studio")](/static/e40a3839203db445db13937bb91d7c1b/0f9ba/jdl-studio.png)

[JDL Studio](https://start.jhipster.tech/jdl-studio/) is a nice graphical tool for drawing JHipster JDL diagrams based on the [JDL syntax](https://www.jhipster.tech/jdl/). You not need to use this graphical tool but can also [create entities using the command-line interface](https://www.jhipster.tech/creating-an-entity/).

After downloading the `.jh` file we can now generate the entities with `jhipster import-jdl jhipster-jdl.jh`. In our example, we just import the default JDL Studio file which is also shown in the picture above.

### Start Backend

Run `./mvnw` which starts the Spring Boot application:

[![JHipster Backend Running](https://www.mokkapps.de/static/7405ef1ad9d23b3ba89bba711ea76789/36727/jhipster-backend-running.png "JHipster Backend Running")](/static/7405ef1ad9d23b3ba89bba711ea76789/410aa/jhipster-backend-running.png)

### Start Frontend

Run `npm start` which starts the Angular application which is then accessible on `http://localhost:9000/`:

[![JHipster Frontend Running](https://www.mokkapps.de/static/8e57bcb3932f96e4b5263983dc78f326/36727/jhipster-frontend-running.png "JHipster Frontend Running")](/static/8e57bcb3932f96e4b5263983dc78f326/82b63/jhipster-frontend-running.png)

Finally, we can log in and see some of the out-of-the-box features like the possibility to see and edit our entities,

[![JHipster Entities](https://www.mokkapps.de/static/137f75f293c71dfaa8ccf61b63365016/36727/jhipster-entity.png "JHipster Entities")](/static/137f75f293c71dfaa8ccf61b63365016/9d68f/jhipster-entity.png)

view metrics of the application

[![JHipster Metrics](https://www.mokkapps.de/static/b88d5d658277763be5754080f8b5ce16/36727/jhipster-metric.png "JHipster Metrics")](/static/b88d5d658277763be5754080f8b5ce16/82b63/jhipster-metric.png)

and a user management

[![JHipster User Management](https://www.mokkapps.de/static/c4d24c9bcfb2ea61936bda886457ea28/36727/jhipster-user-management.png "JHipster User Management")](/static/c4d24c9bcfb2ea61936bda886457ea28/82b63/jhipster-user-management.png)

## Conclusion

In this article, I just showed you a quick start project and mentioned some of the advantages of it. JHipster is much more powerful as you can see in the [official documentation](https://www.jhipster.tech/). In my opinion, it is also a good sign if large companies are using the framework, as you can see [in this official list](https://www.jhipster.tech/companies-using-jhipster/).

A disadvantage of JHipster is that you do not have a typical Angular CLI project. Angular CLI is included in JHipster but the project structure looks different than the one of a default Angular CLI project.

Additionally, JHipster generates a lot of code which includes many libraries which you maybe do not know some of them. You can just add or modify the code without learning the fundamentals behind these libraries but this could lead to some future problems.

You should also keep in mind that a JHipster project is more of a big start than a small, lean project start.