How to create Web Application - JHipster #1

in #utopian-io6 years ago

Repository

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:

Sort:  

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]

Thanks for your feedback

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

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!

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

Do not miss the last post from @steemitboard:

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