JHipster - Generate simple web application code using Spring Boot and Angular

  •        0
  

We aggregate and tag open source projects. We have collections of more than one million projects. Check out the projects section.



JHipster is one of the full-stack web app development platform to generate, develop and deploy. It provides the front end technologies options of React, Angular, Vue mixed with bootstrap and font awesome icons. Last released version is JHipster 6.0.1. It is licensed under Apache 2 license.

It provides flexibility to choose the front-end, back-end technologies, database, deployment options while generating the project. Also provides on the fly add-on support like Elasticsearch, Websockets.

Installation

Pre-requisites for installation of the tool is Java8, Git, Node.js and yarn. Then install the hipster using the yarn command as below to install the recent JHipster version.

    yarn global add generator-jhipster@6.0.1

Once installed, check the version as below

  $jhipster --version
    INFO! Using JHipster version installed globally
    6.0.1

Generator JHipster source code is available in Github

Create application

In this article, we will create an application for basic functionality of IT service management with JHipster. The interesting part will be most of the scaffolding code will be generated by JHipster generator with the CRUD operation and can be modified based on the business need.

Create a project directory and start the jhipster app generator as below.

 $ mkdir itsmapp
 $ cd itsmapp
 $ jhipster app

Once generator started, lot of successive objective questions will be appearing which can be easily answered. After all the questions, the application will be generated.

In case of any queries regarding answers, please check the below screen-shots for kind of answers to be provided.



Then it will generate the complete code of having Angular (latest version 7, infact it can be checked with ng version) as front-end and spring boot (latest version 2.1.4) as back-end with database as H2 for development purpose. After successful generation, the below success message will appear.

Now the project directory will be appearing as below command.

itsmapp$ ls
  angular.json mvnw.cmd package.json pom.xml proxy.conf.json sonar-project.properties tsconfig-aot.json tslint.json
  mvnw node_modules package-lock.json postcss.config.js README.md src tsconfig.json webpack

itsmapp$ ./mvnw

While executing the mvnw command, it builds the application and opens the URL for access. Application generally gets started at 8080. If you want to change to some other custom port, locate the file .yo-rc.json in root directory, where the serverPort key has to be changed to custom port ('9090'). Once changed, we need to re-generate the application to change in all location the port, which can be done by "JHipster" in same project location. For the overwrite prompt, just type "a" so it will be replace all the files.

Admin access is required for accessing the whole system, it can be done by entering admin/admin to open the application. In the admin management, we can check the health, open the Swagger to check the back-end APIs and audits for the trace of users logged in.


Now for itsm app, Asset and Service request will be raised and it will be resolved by the IT Team. This workflow can be incorporated into the application easily after developing it from jdl-online design entities. Entities can be designed using JDL (JHispster Domain Language) where we express the entities and relationship between them.

Now importing the JDL into the project, will generate CRUD operation services for entities by maintaining the relationship integrity also. While executing the below command, it will prompt for overwrite the existing files, please enter 'a', so as to replace all the files. General note is to stop server before importing it.

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

On successful, the following message will appear.


Entity Asset generated successfully.
Entity Employee generated successfully.
Entity Service generated successfully.
Congratulations, JHipster execution is complete!


While generating entities, it will generate the liquibase files for sql changes also. For front-end, it uses webpack to build Angular 7 code. To build the Angular code, key in the command "yarn build". Then start the application by using ./mvnw.


Now under entities, we can see the Employee, Asset and Change request. Now creat two employees one for raising the request and another to resolve.


Asset has been created for which assigned to employee is coming as drop down list which can be tagged to employee.

Now to remove the ribbon showing the dev profile, just remove the tag from this file (main.component.html).

<jhi-page-ribbon></jhi-page-ribbon>

Added footer bar in the footerbar.component.html.

 <div class="footer">
    <nav class="navbar navbar-dark">
       <p class="text-center full-width">@CopyRight 2019-2020</p>
    </nav>
</div>

Then do build the frontend-components, which will rebuild and replace the frontend components without stopping the server. Screen will look like as shown below.

 


Sponsored:
To find embedded technology information about MCU, IoT, AI etc Check out embedkari.com.


   

Nagappan is a techie-geek and a full-stack senior developer having 10+ years of experience in both front-end and back-end. He has experience on front-end web technologies like HTML, CSS, JAVASCRIPT, Angular and expert in Java and related frameworks like Spring, Struts, EJB and RESTEasy framework. He hold bachelors degree in computer science and he is very passionate in learning new technologies.

Subscribe to our newsletter.

We will send mail once in a week about latest updates on open source tools and technologies. subscribe our newsletter



Related Articles

Thymeleaf - Text display, Iteration and Conditionals

  • thymeleaf template-engine web-programming java

Thymeleaf is a server-side Java template engine for both web and standalone environments. It is a better alternative to JavaServer Pages (JSP). Spring MVC and Thymeleaf compliment each other if chosen for web application development. In this article, we will discuss how to use Thymeleaf.

Read More


Introduction to Light 4J Microservices Framework

  • light4j microservice java programming framework

Light 4j is fast, lightweight, secure and cloud native microservices platform written in Java 8. It is based on pure HTTP server without Java EE platform. It is hosted by server UnderTow. Light-4j and related frameworks are released under the Apache 2.0 license.

Read More


Activiti - Open Source Business Automation

  • business-automation business bpm

Activiti Cloud is the first Cloud Native BPM framework built to provide a scalable and transparent solution for BPM implementations in cloud environments. The BPM discipline was created to provide a better understanding of how organisations do their work and how this work can be improved in an iterative fashion.

Read More


Angular Service Workers Usage Guide

  • angular service-worker offline-app

Web developers come across scenarios like web application completely breaks when workstation goes offline. Likewise to get into our application, every time we need to open a browser and then access it. Instead if it is in app, it will be easy to access for end-user. Push notifications similar to email client need to be done through web application. All these are addressed by a magic called service worker.

Read More


Struts 1.x End Of Life. Whats alternative?

  • java eol struts

The Apache Struts Project Team announced End of Life (EOL) for Struts 1.x web framework. Struts was launched in the year 2000. It is only of the widely used web framework. It gave better control over writing UI and business logic code directly in to JSPs.

Read More



Getting Started on Angular 7

  • angular ui-ux front-end-framework

Angular is a platform for building responsive web, native desktop and native mobile applications. Angular client applications are built using HTML, CSS and Typescript. Typescript is a typed superset of Javascript that compiles to plain Javascript. Angular core and optional modules are built using Typescript. Code has been licensed as MIT License.

Read More


8 Best Open Source Searchengines built on top of Lucene

  • lucene solr searchengine elasticsearch

Lucene is most powerful and widely used Search engine. Here is the list of 7 search engines which is built on top of Lucene. You could imagine how powerful they are.

Read More


RESTEasy - A guide to implement CRUD Rest API

  • resteasy rest-api java framework

RESTEasy is a JBoss project that provides various frameworks to help you build RESTful Web Services and RESTful Java applications. It is a fully certified and portable implementation of the JAX-RS 2.1 specification, a JCP specification that provides a Java API for RESTful Web Services over the HTTP protocol. It is licensed under the Apache 2.0 license.

Read More


LogicalDOC - Open Source DMS

  • dms document-management-system

LogicalDOC is both a document management and a collaboration system. The software is loaded with many functions and allows organizing, indexing, retrieving, controlling and distributing important business documents securely and safely for any organization and individual.

Read More


Best open source Text Editors

  • text-editor editor tools dev-tools

Text editors are mainly used by programmers and developers for manipulating plain text source code, editing configuration files or preparing documentation and even viewing error logs. Text editors is a piece of software which enables to create, modify and delete files that a programmer is using while creating website or mobile app.In this article, we will discuss about top 7 all-round performing text editors which is highly supportive for programmers.

Read More


Appserver.io – The First Multithreaded Application Server for PHP written in PHP

  • appserver application-server php

What if you could reliably run PHP without Nginx or Apache, but also without relying on its internal server? What if you could do async operations in PHP with true multi threading, fully taking advantage of multi core processors without hacks or a jungle of callbacks? What if you had drag and drop installation support for your PHAR packaged web apps in an environment identical to its production counterpart? Welcome to appserver.io – the worlds first open source application server for PHP.

Read More


ETag Easy With RESTEasy

  • resteasy etag http-header rest-api

RESTEasy is a JBoss project that provides various frameworks to help you build RESTful Web Services and RESTful Java applications. It comprises of frameworks for mock, embeddable server, rest client, proxy servers, logging and so on.In this article, we will walk-through ETag implementation and show the behaviour related to ETag done by rest easy framework. Example is developed using RESTEasy 3.7 and deployed in tomcat as RESTEasy framework is portable.

Read More


Ngnix - High Performance Web Server, Proxy Server, Content Cache and Reverse Proxy

  • load-balancer proxy-server web-server

Nginx is a High Performance Web Server, Proxy Server, Content Cache and Reverse Proxy server. It can also be used as mail proxy server and a generic TCP/UDP proxy server. Nginx claims to be more efficient and faster in the Web space compared to the other web servers. This can be evident with the architecture which is based on asynchronous event-driven approach. The event driven architecture enables to scale to hundreds / thousands of concurrent connections.

Read More


RESTEasy Advanced Guide - Filters and Interceptors

  • resteasy rest-api filters interceptors java

RESTEasy is JAX-RS 2.1 compliant framework for developing rest applications. It is a JBoss project that provides various frameworks to help you build RESTful Web Services and RESTful Java applications. It is a fully certified and portable implementation of the JAX-RS 2.1 specification, a JCP specification that provides a Java API for RESTful Web Services over the HTTP protocol.

Read More


10 sites to get the large data set or data corpus for free

  • search test-data large-data-set data-corpus dataset

You may require GBs of data to do performance or load testing. How your app behaves when there is loads of data. You need to know the capacity of your application. This is the frequently asked question from the sales team "The customer is having 100GB of data and he wants to know whether our product will handle this? If so how much RAM / Disk storage required?". This article has pointers to the large data corpus.

Read More


JWT Authentication using Auth0 Library

  • java jwt authentication security

Json Web Token shortly called as JWT becomes defacto standard for authenticating REST API. In a traditional web application, once the user login credentials are validated, loggedin user object will be stored in session. Till user logs out, session will remain and user can work on the web application without any issues. Rest world is stateless, it is difficult to identify whether the user is already authenticated. One way is to use authenticate every API but that would be too expensive task as the client has to provide credentials in every API. Another approach is to use token.

Read More


AbanteCart - Easy to use open source e-commerce platform, helps selling online

  • e-commerce ecommerce cart

AbanteCart is a free, open source shopping cart that was built by developers with a passion for free and accessible software. Founded in 2010 (launched in 2011), the platform is coded in PHP and supports MySQL. AbanteCart’s easy to use admin and basic layout management tool make this open source solution both easy to use and customizable, depending on the skills of the user. AbanteCart is very user-friendly, it is entirely possible for a user with little to no coding experience to set up and use this cart. If the user would be limited to the themes and features available in base AbanteCart, there is a marketplace where third-party extensions or plugins come to the rescue.

Read More


Getting Started on Undertow Server

  • java web-server undertow rest

Undertow is a high performing web server which can be used for both blocking and non-blocking tasks. It is extermely flexible as application can assemble the parts in whatever way it would make sense. It also supports Servlet 4.0, JSR-356 compliant web socket implementation. Undertow is licensed under Apache License, Version 2.0.

Read More


An Introduction to the UnQLite Embedded NoSQL Database Engine

  • database nosql embedded key-value-store

UnQLite is an embedded NoSQL database engine. It's a standard Key/Value store similar to the more popular Berkeley DB and a document-store database similar to MongoDB with a built-in scripting language called Jx9 that looks like Javascript. Unlike most other NoSQL databases, UnQLite does not have a separate server process. UnQLite reads and writes directly to ordinary disk files. A complete database with multiple collections is contained in a single disk file. The database file format is cross-platform, you can freely copy a database between 32-bit and 64-bit systems or between big-endian and little-endian architectures.

Read More


Univention Corporate Server - An open source identity management system

  • ucs identity-management-system

Univention Corporate Server is an open source identity management system, an IT infrastructure and device management solution and an extensible platform with a store-like App Center that includes tested third party applications and further UCS components: This is what Univention combines in their main product Univention Corporate Server, a Debian GNU/Linux based enterprise distribution. This article provides you the overview of Univention Corporate Server, its feature and installation.

Read More