How to create Web Application - JHipster #1

Repository

• Repository is hosted on GitHub - https://github.com/martwykotek/library

What Will I Learn?

You will Learn:

• How to install JHipster locally with npm
• How to create, run and deploy to Heroku your simple web application using JHipster.

Requirements

• Java 8 from Oracle
• Node.js (64-bit LTS versions are recommended) from Node.js
• Docker (optionally)
• Git VCS (optionally)
• Basic knowledge about Spring and React is nice to have

Difficulty

• Beginner/Intermediate

Tutorial Contents

JHipster Instalation

Assuming, that you already installed Java and Node.js (see Requirements), do following steps

1. Update npm using npm install -g npm
2. Install Yeoman npm install -g yo
3. Install JHipster npm install -g generator-jhipster

Creating Application

For our purpose we will create web application for Libraries. You can choose whatever you want, but I think, that this case will allow me to create whole bunch of different interactions between users and application to show you in implementation.

To create application:

1. Open terminal
2. Go to designated directory, if you don't have one create it (in my case it is ~/Workspace/library)
3. Type jhipster
4. You will see JHipster generator like here:
   

Let's discuss available options, shall we? I will mark with italic font my options

1. Application Type: for simple project I don't really see need of creating microservices, as it makes development more complex with none value added.
   Choose Monolithic application
2. Base name of your application - How it will be visible in whole application, in README.md and so on.
   Type your application name
3. Default Java package name - It's pretty self-explanatory. Follow Java package naming conventions.
   Type your package name
4. Do you want to use the JHipster Registry to configure, monitor and scale your application? - The JHipster Registry is an Open Source tool used to manage your application at runtime. I often use it, but it is mandatory only on microservice based applications. In our simple case you probably don't need it.
   No
5. Which type of authentication would you like to use? - I choose JWT, because it is stateless, gives you more flexibility in further options (like unified mechanism for web application and mobile app). HTTP Session Authentication utilizes Spring Security and is pretty heavy. OAuth 2.0 is too complex to set up for our purpose.
   JWT authentication (stateless, with a token)
6. Which type of database would you like to use? - Pretty self-explanatory. I chose SQL.
   SQL (H2, MySQL, MariaDB, PostgreSQL, Oracle, MSSQL)
7. ** Which production database would you like to use?** - This is the database you will use with your “production” profile. For Oracle you would have to install Oracle Driver manually
   PostgreSQL
8. Which development database would you like to use? - This is the database you will use with your “development” profile.
   PostgreSQL
   1. H2, running in-memory - easiest one, but your data will be deleted after application server restart.
   2. H2, data stored on disk - easy as well, but you will not loose data after restart
   3. Same database as in development - more complex to set up, but I highly recommend it. This will allow you to work on same environment on production and development. That approach results in lower amount of surprises on production environment.
9. Do you want to use the Spring cache abstraction? - This will have positive impact on application performance. I choose local cache, but really it is up to your preferences.
   Yes, with the Ehcache implementation (local cache, for a single node)
10. Do you want to use Hibernate 2nd level cache? - This appear only for SQL Applications. It will significantly boost your app performance. I highly recommend to use it.
    Y
11. Would you like to use Maven or Gradle for building the backend? - Gradle gives you more control over your application build, which is really important if you want do do something custom with your structure. Gradle also becomes standard in industry from couple years.
    Gradle
12. Which other technologies would you like to use? - Up to you. I chose Elasticsearch for search. To choose option mark it with space and hit enter after you will choose all interesting options.
    Elasticsearch
13. Which Framework would you like to use for the client? Choose Framework for your frontend. Both React and Angular Comes with TypeScript
React
14. Would you like to enable SASS stylesheet preprocessor?
    Y
15. Would you like to enable internationalization support? - Choose Languages for your application. If you will hit N You will stay with English as default. I choose two languages with English as base, to show you how to handle this, but It's up to you.
    Y, English (primary), Polish (secondary)
16. Besides JUnit and Jest, which testing frameworks would you like to use? - Choose Frameworks you WILL use. It doesn't make sense to choose Protractor, when I know, that will not use it. I choose Gatling to test my app performance.
    Gatling
17. Would you like to install other generators from the JHipster Marketplace? - For this step Yeoman is mandatory. To see all options go to JHipster Marketplace
    No

Now JHipster will generate application, initialize its git repo, build front end. After finished operation you will see something like this:

You can successfully import application to your favorite IDE

Build & Run

To run your application set up Elasticsearch and Postgres. You can do it manually, but I use Docker for this purpose, so to run application, that it will be fully functional app:

1. Go to library directory

    cd ~/Workspace/library
   

2. Type

    docker-compose -f src/main/docker/elasticsearch.yml up -d 
    docker-compose -f src/main/docker/postgresql.yml up -d
    ./gradlew
   

3. And in another terminal window

    npm start
   

4. Application will run on port 8080

Deploy to Heroku

1. Install Heroku CLI

2. Create Heroku account all login with CLI

    heroku login
   

3. From your app root run

    jhipster heroku
   

   You will have 3 pretty straightforward options. I'm from eu, and I chose to build JAR locally, but anything else is fine.
   

4. To Open your application run

    heroku open
   

Common issue - Elasticsearch unavailable on Heroku.

Sometimes Heroku doesn't set up Elasticsearch. In that case:

1. Go to your Heroku Dashboard
2. Go to your App
3. Click Resources
   
4. Type and activate Bonsai Elasticsearch (You have to have verified account).
   
5. Redeploy your application (you can do it via Heroku dashboard)
6. Your Application should work fine

Final Result:

You can see my deployed application here:
https://utopian-library.herokuapp.com/#/

This is just a start! Share your thoughts in comments, I will gladly answer your questions.

Stay tuned for next part!

Curriculum

This is second post in JHipster Series. If you want to find out why I chose JHipster in first place checkout post below:

• Stop starting with JHipster - JHipster #0