Building an application web using Jhipster and deployment in Heroku

Introduction

Jhipster is a great project that allows to create monolithic and microservices applications with Java using hot technologies such as Spring Boot + Angular or React and persistence in BD SQL or NoSQL.

Install it is not complicated and everything is in the documentation, but, you need certain requirements.

1. You must have installed Java 8 (You can also use OpenJDK 8)
2. You must have installed Node (Install recommended version for most)
3. You must have installed  Yarn (equivalent to NPM)

Then the installation is with this simple command:

yarn global add generator-jhipster

Creation of the Project

Create a folder for the project called playas and within it execute the jhipster command.

When executing this command you will obtain this output:

It is where we have to choose if we want to create a monolithic or micro-services project.

We are going to create a monolithic project and we will answer the questions  immediately:

• We choose the Monolithic project.
• The name of the project: playas
• The default package: edu.upc.playas
• He asks us if we will use JHipster Registry. We answer No. For this example does not apply and we will talk about it later.
• Type of authentication We choose JWT authentication.
• Type of Database. We choose SQL.
• For Production BD. We choose MySQL.
• For Development BD. We choose H2-with-persistence-to-disk.
• Spring Cache. We choose Ehcache.
• You want to use Hibernate 2nd Level Cache. We answer Yes.
• You choose Maven or Gradle. We answer Maven.
• What other technologies to use ?. We do not choose anything and for that we only give ENTER.
• What framework do you want to use? Angular 6 or React. We choose Angular 6.
• They ask us if we will use SAAS. The answer is No.
• If we are going to enable Internationalization. We answer Yes.
• As a native language, We choose Spanish.
• As an alternative language. We choose English.
• What test framework do you want to use? We choose Protractor.
• The last question is: Would you like to install other generators from the JHipster Marketplace ?. The answer is No.

After the last response, the backend and frontend project is generated respectively. You will see how code is generated and the necessary library downloads are made. Be patient because it takes a few minutes.

The final result is shown below. This indicates that you are ready to execute it in DEV mode.

If we review the directory structure, we will see that in a few minutes a project has been created. If the tool does not exist, this process would have taken many hours.

Importing the project to Intellij Idea

We are going to import the pom.xml to execute the project and see the initial state of the project. Importing it will take a couple of minutes while downloading the dependencies and indexing the project.

To run the application, we have to click on Run.

The output console shows us that we can open the URLs to see the application running.

The page that we will see is the following:

If you want to start a session, you can try with the default accounts:

- Administrator (user = "admin" and password = "admin")

- User (user = "user" and password = "user").

This message indicates the conditions to log in.

The application comes with some pre-installed options, we will enter as administrator to see them all:

From the previous screen, we have the maintenance of users of the application, application metrics, health of the application, configuration of the application, audits, logs, API documentation, and database.

In the next picture, we can change the language of the application from Spanish to English or vice versa.

In the next picture, we can change user data or settings, change the password or log out.

There is a menu of Entities that is empty and which we will work on in the next section.

Entity Design

If you have basic knowledge of JPA you can define the entities of the project, their constraints, relations between them in the JDL-Studio that allows you to design your entities graphically and export that design as a file. After that, with jhipster, we can import this file to the project. Jhipster creates the maintenance of these entities in a few minutes.

The code of the entities can be downloaded from this gist. I will put it in the Downloads folder.

To import them to the project you just have to execute the following command within the playas directory (Stop the project first if it is running):

jhipster import-jdl ~/Downloads/jhipster-jdl.jh

In one of the steps, you will be asked if you want to overwrite the files. Answer with the letter a and wait for a couple of minutes to end.

The result is as follows:

It is not ready yet. You will have to execute a yarn start and then execute the project in IntelliJ or use mvnw spring-boot: run. I will use the IDE.

The result of yarn start is:

Cancel with Ctrl + C and then run the project from the IDE.

Each Entity will have its CRUD implemented.

At this point I invite you to try the application and make the improvements you see necessary.

Deployment in Heroku

Heroku is one of the PaaS most used today in business environments for its strong focus on solving the deployment of an application. It also allows you to manage the servers and their configurations, scaling and administration. A Heroku just tell you what backend language you are using or what database you are going to use and you care only about the development of your application.

Jhipster is going to help us deploy this application in Heroku in such a simple way. This will be our production environment, therefore, the persistence will be in MySQL.

The requirement is to be in Hobbie payment mode. Because otherwise, the MySQL Addon will fail us. That is, they will have to register their Credit Card. In Peru $ 7 is approximately 25 soles per month, but, I have no choice but to try.

jhipster heroku

• He will ask us what name we will use for the deployment: playas.
• In what region we are going to deploy: us.
• What kind of deployment are we going to use: Git
• If you ask us if you are going to overwrite the pom.xml, we respond with the letter a.

We wait a few minutes for it to finish, generate the BD and it ready to do tests.

Your app should now be live. To view it run

heroku open

And you can view the logs with this command

heroku logs --tail

After application modification, redeploy it with

jhipster heroku

Congratulations, JHipster execution is complete!

Let's run the application with heroku logs --tail and see the logs to see if everything is ok.

Stop the execution with Ctrl + C and start running the application without problems with heroku open. This will open the website https://playas.herokuapp.com/#/ and we can share this URL with our colleagues or customers.

Enjoy!

Joe