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.

 


   

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

WebSocket implementation with Spring Boot

  • websocket web-sockets spring-boot java

Spring Boot is a microservice-based Java framework used to create web application. WebSocket API is an advanced technology that provides full-duplex communication channels over a single TCP connection. This article explains about how to implement WebSocket using Spring Boot.

Read More


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


Push Notifications using Angular

  • angular push-notifications notifications

Notifications is a message pushed to user's device passively. Browser supports notifications and push API that allows to send message asynchronously to the user. Messages are sent with the help of service workers, it runs as background tasks to receive and relay the messages to the desktop if the application is not opened. It uses web push protocol to register the server and send message to the application. Once user opt-in for the updates, it is effective way of re-engaging users with customized content.

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


COVID19 Stats using Angular Material Design

  • angular material-design covid covid-stats

Material design is inspired from the real world building architecture language. It is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material streamlines collaboration between designers and developers, and helps teams quickly build beautiful products. In this article, we will build COVID stats using Angular Material design.

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


Angular Security - Authentication Service

  • angular security authentication jwt

Angular is a framework for creating single page web application. Angular facilitates the security feature and protection mechanism. It provides frameworks by verifying all the routing urls with security authguard interface to validate and verify the user and its permissions.

Read More


All About Multi-Provider Feature of Angular Version 2.0

  • angular dependency-injection multi-providers

The newly introduced concept of dependency injection in Angular version 2.0 makes it an attractive front-end technology all because of one amazing feature called 'Multi-Providers'. In general, it allows the users to attach certain operations by themselves and a few plugin custom functionality which is not required in our mobile app use case.

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


Laravel eCommerce Platform - Bagisto

  • ecommerce shopping laravel php

Nowadays on the web, Shopping is one of the most popular activities. Everyone can shop at their recess, anytime from anywhere. However, this is interesting that anyone can have their pages built to display their favourite products and services.

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


Getting Started With Django Python Web Framework

  • django python web-framework

Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. It is pre-loaded with user authentication, content administration, site maps, RSS feeds and many more tasks. Security features provided are cross site scripting (XSS) protection, cross site request forgery protection, SQL injection protection, click-jacking protection, host header validation, session security and so on. It also provides in built caching framework.

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