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

Update npm using npm install -g npm
Install Yeoman npm install -g yo
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:

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

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

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
Base name of your application - How it will be visible in whole application, in README.md and so on.
Type your application name
Default Java package name - It's pretty self-explanatory. Follow Java package naming conventions.
Type your package name
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
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)
Which type of database would you like to use? - Pretty self-explanatory. I chose SQL.
SQL (H2, MySQL, MariaDB, PostgreSQL, Oracle, MSSQL)
** 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
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.
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)
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
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
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
Which Framework would you like to use for the client? Choose Framework for your frontend. Both React and Angular Comes with TypeScript
React
Would you like to enable SASS stylesheet preprocessor?
Y
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)
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
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:

Go to library directory
```
 cd ~/Workspace/library
```

Type

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

And in another terminal window
```
 npm start
```
Application will run on port 8080

Deploy to Heroku

Install Heroku CLI
Create Heroku account all login with CLI
```
 heroku login
```
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.
To Open your application run
```
 heroku open
```

Common issue - Elasticsearch unavailable on Heroku.

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

Go to your Heroku Dashboard
Go to your App
Click Resources
Type and activate Bonsai Elasticsearch (You have to have verified account).
Redeploy your application (you can do it via Heroku dashboard)
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

Thank you for your contribution @martwykotek.
After analyzing your tutorial we suggest the following points below:

In the title put key words of the technologies that you will use, such as, NodeJS, Oracle and React.
We suggest that you always put the references at the end of your tutorial where some information was used. As for example this reference: Link

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.

Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

Sort:

Trending

[-]

portugalcoin (75) 6 years ago

$8.08

12 votes

martwykotek (53) 6 years ago

Thanks for your feedback

$0.00

utopian-io (71) 6 years ago

Thank you for your review, @portugalcoin! Keep up the good work!

steem-ua (64) 6 years ago

Hi @martwykotek!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Hey, @martwykotek!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

steemitboard (66) 6 years ago

Congratulations @martwykotek! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You received more than 100 as payout for your posts. Your next target is to reach a total payout of 250

_{Click here to view your Board of Honor}
_{If you no longer want to receive notifications, reply to this comment with the word STOP}

Do not miss the last post from @steemitboard:

SteemFest3 and SteemitBoard - Meet the Steemians Contest

Support SteemitBoard's project! Vote for its witness and get one more award!

Congratulations @martwykotek! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 2 years!

_{You can view your badges on your Steem Board and compare to others on the Steem Ranking}

SteemitBoard - Witness Update

Vote for @Steemitboard as a witness to get one more award and increased upvotes!

hivebuzz (74) 4 years ago

Congratulations @martwykotek! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s) :

You got more than 200 replies. Your next target is to reach 300 replies.

_{You can view your badges on your board And compare to others on the Ranking}
_{If you no longer want to receive notifications, reply to this comment with the word STOP}