JHipster Series 1: Write Full Stack Application Fast and Easy With JHipster
By: Mascova Blog
Tags: Java, Spring Boot, Angular, Jhipster

You want to create a Full Stack Application, but there is problem on where you are going:

- You really don’t know which technology is best to be applied, you also don’t know what is the best practices, the implementation standard, etc

- It is take a long time to learn the above, the experience may well be misleading because there are a lot (if it too many) of library and components candidates which can be assembled into Full Stack Application.

The Solution

To overcome the problems above, you can use a generator for this. Since I’m coming for Java environment, I would recommended JHipster for this.

To create an application in JHipster, traditionally you can use a command-line to generate your application. But of course, you have to setup the environment first by installing Yeoman generator for JHipster. A lot can be happened with your local installation:

- You probably facing a problems with the versioning.

- Some of your library conflict with each other. Since this is your local installation, you spent a lot of development and testing with various libraries which can screwed up your local environment big time.

Which is why I’m starting using the online generator for this.

Generate the Source Code for Application

You need to register first. And after logged in, you can start create your application.

Before Create the application, it is better if you setup your Gitlab/Github Account in menu Configure. This will be the generated source code which the place reside.

After the git account setup is done, you can start create application and choose the option you may prefer.

We will create an application called Elastic Kingdom (you can see the brief explanation here).

You may want to see the description of each option in the JHipster Official Documentation before choosing it.

Below is my preferred options:

I prefer to use monolith right for now, for the sake of simplicity. In the next stories, I will try to split the application into Front-End and Back-End for better managerial use. And also probably trying to split some of the functions in the Back-End into microservices, or go full microservices.

I’m using PostgreSQL both for my development and production, other is default options. I also choose to use Elastic Search since is the default option in JHipster if you want Search Functionality to be enabled in your data page:

It is recommended to uncheck Elasticsearch (ES) for this tutorial since it will give error when building the projects if ES url is not found.

Choose defaults for client side options and Testing Options. Add additional language (Indonesian is my native language)

And you can click the button the generate it (on GitLab/Github, based on on your choice).

After a while, it prompted-up a message that your code generation process is finished.

Now try to clone the project into your local directory:

Prepare the PostgreSQL Database

Before we can start the application, we need to prepare for the database:

Open PgAdmin 4, or any PostgreSQL client that you can use. Create Login/Group Role:

For the simplicity, let’s us named it the same for the login:

And the same also for the password (elastickingdom):

And don’t forget to give privilege to login:

After it saved, there is a new Login called ‘elastickingdom’ n your database:

Now let’s create the database:

Give it the same name (since it is for development), and don’t forget to set the owner to the login we just created:

After saved, make sure that the database is created with the login:

Running The Application

After the source code is cloned, database environment has been setup, let’s connect the application’s source code for it to be able to connect to the database.

From your cloned Git Repository, open this file: src/main/resources/config/application-dev.yml

Find spring.datasource.password and filled it with the password you’ve setup before (elastickingdom):

Now after the credentials has been set, make sure that you have this in your environment:

- OpenJDK 11 and Apache Maven for Back-End

- NodeJS for Front-End

After the environment is set, go to command line and make sure that you are in the project directory where you git cloned it, type this:

./mvnw

If it runs correctly, there will be progress to build the project and deploy it (it takes time for first run):

After a while, the application is ready when it display the URL for the access:

Try to access http://localhost:8080/, if it went correctly, will display like below:

Try explore it by acccessing Account > Sign In. Put “admin” as User and “admin” as password:

This is the Admin access of the Website Application. Feel free to explore!

Next: Add Entities into JHipster Application