If you are developing a web application today, you have various code generators and frameworks at your disposal, which save you a lot of work, providing a basis of tools and code for your website. However, it’s not always easy to find these components and get them to work together in harmony, while also being a good fit for your site. For this reason, the JHipster team has combined some of the most popular frameworks for front and back end development in their platform of the same name. The mix of Spring Boot, AngularJS, Bootstrap and numerous other components is completely open source and perfectly suited for the creation of modern web applications and microservices.
Together with a handful of other developers, Julien Dubois started the JHipster (short for “Java Hipster”) website. The name stood primarily for the concept of a website generator, since JHipster is meant to unite Java with other web development tools. Today, the Framework collection targets the enterprise sector in particular, with a focus on enabling high productivity during the development process as well as high-quality, application development. A team of more than 15 core developers and hundreds of contributors are responsible for continuous further development. The JHipster code, which is distributed with the Apache 2.0 license, is freely available to anyone on GitHub.
JHipster provides solutions for creating and designing on the front end, as well as the necessary tools for back end development. For example, Spring Boot provides the perfect basis for generating a robust Java stack on the server side, which can then be easily connected to various databases, virtualization engines, and monitoring tools, and is linked to the front end through the REST interface. Among others, JHipster supports the following server-side options:
As far as front end development is concerned, JHipster relies mainly on the JavaScript frameworkAngular.js and the JavaScript libraryReact. Both can be optionally combined with Twitter Bootstrap, the forerunner of the web framework and the alternative web template HTML5 Boilerplate. Additionally, JHipster can be extended with the stylesheet language Sass, which simplifies design using CSS3.
Tools like the code generator Yeoman, the JavaScript module bundler Webpack or the build management applications Gulp (for JavaScript) and Maven and Gradle (for Java) ensure the optimal workflow when using these different out-of-the-box solutions.
As the above list shows, the JHipster collection is distinguished by the fact that the individual components are perfectly matched to one another. If you want to program your website with Java, you should definitely consider using the suite. JHipster not only lowers the entry barriers associated with development, but simplifies and unifies the entire programming process – whether during the actual development of the application or subsequent revisions and extensions of code. Since JHipster also provides you with the most important tools for development, you can save a lot of time by using the framework collection.
With JHipster you can also quickly generate a web application that supports CRUD operations and has a clearly structured source code. Other useful features like user management or internationalization are also available.
After this short introduction to the concept of JHipster, in the following tutorial you will learn how to install the framework collection. We will also explain the first steps to be taken when using the code frameworks.
There are several ways to set up JHipster. For example, you can access the “development box”. It is based on Vagrant software and makes JHipster run on a virtual Ubuntu machine. For Docker fans, however, the JHipster container on GitHub might be more interesting, as it provides an image that you can use to run the framework suite within Docker. Of course, the classic, local installation on your own server is also possible, whereby you can use either npm or Yarn as a package manager. The latter is the choice recommended by the development team, which is why it is also the basis for the installation process in this JHipster tutorial. This process goes like this:
If you have already installed one or more of the applications mentioned here, you can of course save yourself from following the corresponding installation steps.
You can now obtain and install the generator application Yeoman, as well as JHipster itself, through the package manager. To do this, just enter the following commands in sequence:
yarn global add yo
yarn global add generator-jhipsterUsing JHipster Online is an alternative that does not require any installation to use the framework package. The service generates a complete JHipster application, which you can either host on an existing GitHub account or download in ZIP format.
Once all components are installed, you can take your first steps with the JHipster generator and create your first sample project. For this purpose, you first need a home directory (here referred to as “jhipster-example”), where the corresponding files are stored. The same can be created with this simple command line command:
mkdir jhipster-exampleThen navigate to the created directory and execute the JHipster start command:
yo jhipsterThe generator then presents you with a series of questions that you can use to define your application type and select the desired features and software. In this way you can determine, for example, whether a caching mechanism needs to be implemented or which tool should be used to design the back end (Gradle or Maven). If required, you can also activate support for internationalizing your project here and select the basic language and additional language variants. In most cases, the default value is sufficient for our test subject.
Once you have found the setup of your choice, you can start the generation process. If this runs smoothly, you will receive automatic feedback after a short time that the server and client application have been successfully generated.
JHipster has now created the basic framework of your web application and stored the corresponding code in the created directory. From there, you can start your own server based on Spring Boot. Which command you use depends on which back end design tool you choose. If you choose Maven, use the Maven wrapper built into JHipster to run the server component through the following command:
./mvnw (on macOS/Linux)
mvnw (on Windows)If you have chosen Gradle, the required command is:
./gradlew (on macOS/Linux)
gradlew (on Windows)If you have Maven or Gradle on your system, the commands “mvn” or “gradle” are sufficient.
If you have not specified another port when generating your JHipster project (port 8080 is reserved by default), you can now call the back end at the address 'http://localhost:8080' in any common browser. This opens the start page, which you can use to log into the back end.
The page provides the standard data for administrator and easy user access:
| Administrator account | User account |
Name | admin | user |
Password | admin | user |
When you log on to the administrator account, the “Administration” and “Entities” items are added to the server’s menu bar. You need the former to manage your web application. The following options are available to you:
You can also use the “Language” tab to change the language version of your site’s interface.
In order to protect your privacy, the video will not load until you click on it.
In the previous step, the second important menu item on the JHipster back end, “Entities” has already been discussed. Through these units, which you can view, edit, or delete at any time (thanks to the CRUD concept already mentioned), you provide input for your databases – and also content input for your project. To create these entities in JHipster, you have several options: The standard solution is the entity sub-generator, which can be operated from the command line. The syntax of this generator is as follows:
jhipster entity <entityName> -- [options]To get to know the range of possibilities this tool has, we recommend entering “jhipster entity –help.” The command lists the available options (as the following screenshot shows):
Alternatively, you can create the entities using a graphics tool. You have two options for this: the UML editorJHipster UML which you can find on GitHub, and the online application JDL Studio based on the domain-specific language JDL (JHipster Domain Language).
Bootstrap is one of the best solutions when it comes to creating websites for all devices with little effort. But what exactly lies behind the framework that was originally planned to be used as an internal optimization tool for Twitter? Can total beginners with no CSS, JavaScript, or HTML experience also achieve attractive results?
It won’t take long for those looking to get into to software development to encounter the term CRUD. The acronym stands for the typical operations used for communicating with database systems; these normally form the basis of database management. But just how are these access functions for data management actually set up? And how much of role does CRUD play when it comes to the databases’...
Java doesn’t play a big role when it comes to simple web development, although the programming language has still maintained a strong appeal. The language, which is no longer supported by browsers, has established itself as an efficient solution finding tool, especially when designing backends for business applications. The Spring framework contains various modules that serve as a basis for...
Google is best known for its search engine, but also for services like AdWords, Maps, or Gmail. Since 2012, the mega-corporation has had its own programming language in its product range: Go. Also known under the name Golang, it has drawn attention to itself through its simplicity. But how does it differ from established representatives like C++ or JavaScript? And when does it make sense to...
Traditional frameworks for programming web apps, such as React and Vue, shift the majority of the work of a web app to the browser. This makes the apps sluggish and requires a lot of data. Svelte compiles the apps in the background in a lean optimized JavaScript which the user experiences as a significant performance boost.
Provide powerful and reliable service to your clients with a web hosting package from IONOS.
View packages