= Get Started with JHipster 7 :author: Matt Raible :email: matt@raibledesigns.com :revnumber: 1.0 :revdate: {docdate} :subject: JHipster :keywords: JHipster, Angular, Spring Boot, Bootstrap 4, JHipster 7, Angular 11 :icons: font :lang: en :language: javadocript :sourcedir: . ifndef::env-github[] :icons: font endif::[] ifdef::env-github,env-browser[] :toc: preamble :toclevels: 2 endif::[] ifdef::env-github[] :status: :outfilesuffix: .adoc :!toc-title: :caution-caption: :fire: :important-caption: :exclamation: :note-caption: :paperclip: :tip-caption: :bulb: :warning-caption: :warning: endif::[] :toc:

This article shows you how to build a simple blog application with https://www.jhipster.tech/2021/04/02/jhipster-release-7.0.1.html[JHipster 7.0.1]. You can also https://youtu.be/6lf64CctDAQ[watch a screencast of this tutorial on YouTube].

ifdef::env-github[] TIP: It appears you're reading this document on GitHub. If you want a prettier view, install https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia[Asciidoctor.js Live Preview for Chrome], then view the https://raw.githubusercontent.com/mraible/jhipster7-demo/main/README.adoc[raw document]. endif::[]

.Source Code

---

If you'd like to get right to it, the https://github.com/mraible/jhipster7-demo[source code for this application is on GitHub]. To run the app, use ./mvnw. To test it, run ./mvnw verify. To run its end-to-end tests, run ./mvnw in one terminal and npm run e2e in another.

---

== What is JHipster?

JHipster is one of those open-source projects you stumble upon and immediately think, "Of course!" It combines three very successful frameworks in web development: Bootstrap, Angular, and Spring Boot. Bootstrap was one of the first dominant web-component frameworks. Its most substantial appeal was that it only required a bit of HTML, and it worked! All the efforts we made in the Java community to develop web components were shown a better path by Bootstrap. It leveled the playing field in HTML/CSS development, much like Apple's Human Interface Guidelines did for iOS apps.

https://www.julien-dubois.com/[Julien Dubois] started JHipster in October 2013 (Julien's first commit was on https://github.com/jhipster/generator-jhipster/commit/c8630ab7af7b6a99db880b3b0e2403806b7d2436[October 21, 2013]). The first public release (version 0.3.1) launched on December 7, 2013. Since then, the project has had over 200 releases! It is an open-source, Apache 2.0-licensed project on GitHub. It has a core team of 38 developers and over 600 contributors. You can find its homepage at https://www.jhipster.tech/[www.jhipster.tech]. If you look at https://github.com/jhipster/generator-jhipster[the project on GitHub], you can see it's mostly written in JavaScript (52%), TypeScript (19.8%), and Java (17.7%).

JHipster 7 is the same JHipster many developers know and love, with a couple of bright and shiny new features: namely Vue and Spring Boot 2.4 support.

== Install JHipster 7

The http://www.jhipster.tech/installation/[Installing JHipster] instructions show you all the tools you'll need to use a released version of JHipster.

. Install Java 11 https://sdkman.io/[using SDKMAN!] . Install Git from https://git-scm.com. . Install Node.js from http://nodejs.org. JHipster recommends using an LTS release. . Run the following command to install JHipster.

npm i -g generator-jhipster@7.0.1

NOTE: If you're using Yarn, run yarn global add generator-jhipster@7.0.1.

== Create a Project

To create a project, open a terminal window and create a directory. For example, mkdir blog. Navigate into the directory and run jhipster. You'll be prompted to answer several questions about the type of application you want to create and what features you'd like to include. The screenshot below shows the choices I made to create a simple blog application with Angular.

.Generating the application image::static/generating-blog.png[Generating the application, 800, scaledwidth=100%]

If you'd like to create the same application I did, you can place the following .yo-rc.json file in an empty directory and run jhipster in it. You won't be prompted to answer any questions because this file provides the answers.

[source,json]

{ "generator-jhipster": { "blueprints": [], "otherModules": [], "applicationType": "monolith", "baseName": "blog", "jhipsterVersion": "7.0.1", "skipClient": false, "skipServer": false, "skipUserManagement": false, "skipCheckLengthOfIdentifier": false, "skipFakeData": false, "jhiPrefix": "jhi", "entitySuffix": "", "dtoSuffix": "DTO", "testFrameworks": ["cypress"], "pages": [], "creationTimestamp": 1619451584671, "serviceDiscoveryType": false, "reactive": false, "authenticationType": "jwt", "packageName": "org.jhipster.blog", "serverPort": "8080", "cacheProvider": "ehcache", "enableHibernateCache": true, "databaseType": "sql", "devDatabaseType": "h2Disk", "prodDatabaseType": "postgresql", "buildTool": "maven", "serverSideOptions": [], "websocket": false, "searchEngine": false, "messageBroker": false, "enableSwaggerCodegen": false, "clientFramework": "angularX", "withAdminUi": true, "clientTheme": "none", "enableTranslation": true, "nativeLanguage": "en", "packageFolder": "org/jhipster/blog", "jwtSecretKey": "ZGM4ZTY3ZDk5MjE3NjA0ZDcxOWYxOGVkYzg4YTBjNDYyOGVhNjdjMjY0MzIyMjNlZDEzNzM5ZDVkYWQ2NWI0OTdiMmJlNDIxZTc4MTc5MmYxYjkzODEzYTQ4YmY5NTU5MjczNTA4YmE4YWFkNDg3NDRiOWJhYjgxYjhkOTBjNzg=", "clientPackageManager": "npm", "clientThemeVariant": "", "languages": ["en", "es"] } }

The project creation process will take a couple of minutes to run, depending on your internet connection speed. When it's finished, you should see output like the following.

.Generation success image::static/generation-success.png[Generation success, 800, scaledwidth=100%]

Run ./mvnw to start the application and navigate to http://localhost:8080 in your favorite browser. The first thing you'll notice is a hipster explaining how you can sign in or register.

.Default homepage image::static/default-homepage.png[Default homepage, 800, scaledwidth=100%]

Sign in with username admin and password admin, and you'll have access to navigate through the Administration section. This section offers nice-looking UIs on top of some Spring Boot's many monitoring and configuration features. It also allows you to administer users:

.User management image::static/user-management.png[User management, 800, scaledwidth=100%]

Administration > Metrics gives you insights into Application and JVM metrics:

.Application metrics image::static/app-metrics.png[Application and JVM Metrics, 800, scaledwidth=100%]

Administration > API allows you to see the Swagger docs associated with its API.

.Swagger docs image::static/swagger-ui.png[Swagger UI, 800, scaledwidth=100%]

You can run the following command (in a separate terminal window) to run the Cypress tests and confirm everything is working correctly.

---

npm run e2e

== Generate Entities

For each entity you want to create, you will need:

• a database table;
• a Liquibase changeset;
• a JPA entity class;
• a Spring Data JpaRepository interface;
• a Spring MVC RestController class;
• an Angular list component, edit component, service; and
• several HTML pages for each component.

Also, you should have integration tests to verify that everything works and performance tests to confirm that it runs fast. In an ideal world, you'd also have unit tests and integration tests for your Angular code.

The good news is JHipster can generate all of this code for you, including integration tests and performance tests. If you have entities with relationships, it will create the necessary schema to support them (with foreign keys), and the TypeScript and HTML code to manage them. You can also set up validation to require certain fields as well as control their length.

JHipster supports several methods of code generation. The first uses its https://www.jhipster.tech/creating-an-entity/[entity sub-generator]. The entity sub-generator is a command-line tool that prompts you with questions that you answer.

https://start.jhipster.tech/jdl-studio/[JDL-Studio] is a browser-based tool for defining your domain model with JHipster Domain Language (JDL). I like the visual nature of JDL-Studio, so I'll use it for this project.

Below is the entity diagram and JDL code needed to generate a simple blog with blogs, posts, and tags.

.Blog entity diagram image::static/jdl-studio.png[Blog entity diagram, 800, scaledwidth=100%]

TIP: You can find a few other https://github.com/jhipster/jdl-samples[JDL samples on GitHub].

If you'd like to follow along, copy/paste the contents of the JDL below into a blog.jdl file.

.blog.jdl

entity Blog { name String required minlength(3) handle String required minlength(2) }

entity Post { title String required content TextBlob required date Instant required }

entity Tag { name String required minlength(2) }

relationship ManyToOne { Blog{user(login)} to User Post{blog(name)} to Blog }

relationship ManyToMany { Post{tag(name)} to Tag{post} }

paginate Post, Tag with infinite-scroll

Run the following command to import this file and generate entities, tests, and a UI.

[source,shell]

jhipster jdl blog.jdl

You'll be prompted to overwrite src/main/webapp/i18n/en/global.json. Type a to overwrite this file, as well as others.

Restart the application with /.mvnw.

You might notice that each entities' list screen is pre-loaded with data. https://github.com/marak/Faker.js/[faker.js] creates this data. To turn it off, edit src/main/resources/config/application-dev.yml, search for faker and remove it from the liquibase.contexts configuration. I made this change in this example's code.

[source,yaml]

liquibase:

Add 'faker' if you want the sample data to be loaded automatically

contexts: dev

TIP: If you still have data in your list screens after making this change, run ./mvnw clean to delete the H2 database.

Create a couple of blogs for the existing admin and user users and a few blog entries.

.Blogs image::static/blogs.png[Blogs, 800, scaledwidth=100%]

.Entries image::static/posts.png[Posts, 800, scaledwidth=100%]

From these screenshots, you can see that users can see each other's data and modify it.

== Add Business Logic

TIP: To configure an IDE with your JHipster project, see https://www.jhipster.tech/configuring-ide/[Configuring your IDE]. Instructions exist for Eclipse, IntelliJ IDEA, Visual Studio Code, and NetBeans.

To add more security around blogs and entries, open BlogResource.java and find the getAllBlogs() method. Change the following line:

[source,java] .src/main/java/org/jhipster/blog/web/rest/BlogResource.java

return blogRepository.findAll();

To:

[source,java]

return blogRepository.findByUserIsCurrentUser();

The findByUserIsCurrentUser() method is generated by JHipster in the BlogRepository class and allows limiting results by the current user.

[source,java] .src/main/java/org/jhipster/blog/repository/BlogRepository.java

public interface BlogRepository extends JpaRepository<Blog, Long> { @Query("select blog from Blog blog where blog.user.login = ?#{principal.username}") List findByUserIsCurrentUser(); }

After making this change, re-compiling BlogResource should trigger a restart of the application thanks to https://docs.spring.io/spring-boot/docs/current/reference/html/using-spring-boot.html#using-boot-devtools[Spring Boot's Developer tools]. If you navigate to http://localhost:8080/blog, you should only see the blog for the current user.

.Admin's blog image::static/blogs-admin.png[Admin's blog, 800, scaledwidth=100%]

To add this same logic for entries, open PostResource.java and find the getAllPosts() method. Change the following line:

[source,java] .src/main/java/org/jhipster/blog/web/rest/PostResource.java

Page page; if (eagerload) { page = postRepository.findAllWithEagerRelationships(pageable); } else { page = postRepository.findAll(pageable); }

To:

[source,java]

page = postRepository.findByBlogUserLoginOrderByDateDesc( SecurityUtils.getCurrentUserLogin().orElse(null), pageable);

Using your IDE, create this method in the PostRepository class. It should look as follows:

[source,java] .src/main/java/org/jhipster/blog/repository/PostRepository.java

Page findByBlogUserLoginOrderByDateDesc(String currentUserLogin, Pageable pageable);

Recompile both changed classes and verify that the user user only sees the posts you created for them.

.User's entries image::static/posts-user.png[User's posts, 800, scaledwidth=100%]

You might notice that this application doesn't look like a blog, and it doesn't allow HTML in the content field.

=== Fix Cypress Tests

The changes you just made to limit data visibility will cause Cypress end-to-end tests to fail. To fix them, you need to change from selecting the last user to selecting the admin user. Open blog.spec.ts and change the following line:

[source,ts] .src/test/javascript/cypress/integration/entity/blog.spec.ts

cy.setFieldSelectToLastOfEntity('user');

to:

[source,ts]

cy.get('[data-cy="user"]').select('admin');

Then, change post.spec.ts to update the test that creates a new post. At the beginning of the test, add a new blog that the post can relate to.

[source,ts]

it('should create an instance of Post', () => { // add blog before post cy.clickOnEntityMenuItem('blog'); cy.get(entityCreateButtonSelector).click({ force: true }); cy.get([data-cy="name"]).type('Admin blog', { force: true }).invoke('val'); cy.get([data-cy="handle"]).type('admin', { force: true }).invoke('val'); cy.get('[data-cy="user"]').select('admin'); cy.get(entityCreateSaveButtonSelector).click({ force: true }); // end of add blog

Then, change cy.setFieldSelectToLastOfEntity('blog') to select this blog.

[source,ts]

cy.get('[data-cy="blog"]').select('Admin blog');

It's a good idea to clean up any data you add in e2e tests. Add the following to the bottom of the last test in post.spec.ts that deletes the post.

[source,ts]

// delete blog added earlier cy.intercept('GET', '/api/blogs').as('entitiesRequest'); cy.intercept('DELETE', '/api/blogs/').as('deleteEntityRequest'); cy.wait('@entitiesRequest').then(({ request, response }) => { cy.get(entityDeleteButtonSelector).last().click({ force: true }); cy.get(entityConfirmDeleteButtonSelector).click({ force: true }); cy.wait('@deleteEntityRequest'); cy.visit('/'); });

Run npm run e2e to confirm everything works as expected.

== Make UI Enhancements

When doing UI development on a JHipster-generated application, it's nice to see your changes as soon as you save a file. JHipster uses https://www.browsersync.io/[Browsersync] and https://webpack.github.io/[webpack] to power this feature. You enable this feature by running the following command in the blog directory.

---

npm start

In this section, you'll change the following:

. Change the rendered content field to display HTML . Change the list of entries to look like a blog

=== Allow HTML

If you enter HTML in the content field of a blog post, you'll notice it's escaped on the list screen.

.Escaped HTML image::static/posts-with-html-escaped.png[Escaped HTML, 800, scaledwidth=100%]

To change this behavior, open post.component.html and change the following line:

[source,html] .src/main/webapp/app/entities/post/list/post.component.html

{{ post.content }}

---

To:

[source,html]

<td [innerHTML]="post.content">

After making this change, you'll see that the HTML is no longer escaped.

.HTML in entries image::static/posts-with-html.png[Escaped HTML, 800, scaledwidth=100%]

=== Improve the layout

To make the list of entries look like a blog, replace <div class="table-responsive"> with HTML, so it uses a stacked layout in a single column.

[source,html] .src/main/webapp/app/entities/post/list/post.component.html

<div class="table-responsive" ngIf="posts && posts.length > 0"> <div infinite-scroll (scrolled)="loadPage(page + 1)" [infiniteScrollDisabled]="page >= links['last']" [infiniteScrollDistance]="0"> <div ngFor="let post of posts; trackBy: trackId" data-cy="entityTable"> <a [routerLink]="['/post', post.id, 'view']" data-cy="entityDetailsButton">

{{ post.title }}

  </a>
  <small>Posted on {{ post.date | formatMediumDatetime }} by {{ post.blog?.user?.login }}</small>
  <div [innerHTML]="post.content"></div>
  <div class="btn-group mb-2 mt-1">
    <button type="submit" [routerLink]="['/post', post.id, 'edit']" class="btn btn-primary btn-sm">
      <fa-icon icon="pencil-alt"></fa-icon>
      <span class="d-none d-md-inline" jhiTranslate="entity.action.edit" data-cy="entityEditButton">Edit</span>
    </button>
    <button type="submit" (click)="delete(post)" class="btn btn-danger btn-sm" data-cy="entityDeleteButton">
      <fa-icon icon="times"></fa-icon>
      <span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Delete</span>
    </button>
  </div>
</div>