This article shows you how to build a simple blog application with JHipster 6.1.2. You can also watch a screencast of this tutorial on YouTube.

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.

Julien Dubois started JHipster in October 2013 (Julien’s first commit was on October 21, 2013). The first public release (version 0.3.1) launched on December 7, 2013. Since then, the project has had over 194 releases! It is an open-source, Apache 2.0-licensed project on GitHub. It has a core team of 29 developers and over 500 contributors. You can find its homepage at www.jhipster.tech. If you look at the project on GitHub, you can see it’s mostly written in JavaScript (36%) and Java (28%).

JHipster 6 is the same JHipster many developers know and love, with a couple of bright and shiny new features: namely Java 11 and Spring Boot 2.1 support.

The Installing JHipster instructions show you all the tools you’ll need to use a released version of JHipster.

1. Install Java 11 using SDKMAN!

2. Install Git from https://git-scm.com.

3. Install Node.js from http://nodejs.org. JHipster recommends using a LTS release.

4. Run the following command to install JHipster.

   npm i -g [email protected]

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 a number of 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.

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 the answers are provided by this file.

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.

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.

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:

It gives you insights into Application and JVM metrics:

And it allows you to see the Swagger docs associated with its API.

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

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

• a database table;

• a Liquibase change set;

• 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. Also, 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 entity sub-generator. The entity sub-generator is a command-line tool that prompts you with questions which you answer.

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, entries, and tags.

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

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

You’ll be prompted to overwrite src/main/resources/config/liquibase/master.xml. 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. This is done by faker.js. 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.

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

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

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

To:

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

After making this change, re-compiling BlogResource should trigger a restart of the application thanks to Spring Boot’s Developer tools. If you navigate to http://localhost:8080/blog, you should only see the blog for the current user.

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

To:

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

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

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

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 Browsersync and webpack to power this feature. You enable this feature by running the following command in the blog directory.

In this section, you’ll change the following:

1. Change the rendered content field to display HTML

2. Change the list of entries to look like a blog

Allow HTML

Figure 12. Escaped HTML

<td>{{entry.content}}</td>

<td [innerHTML]="entry.content"></td>

Figure 13. HTML in entries

Improve the layout

<div class="table-responsive" *ngIf="entries?.length > 0">
    <div infinite-scroll (scrolled)="loadPage(page + 1)" [infiniteScrollDisabled]="page >= links['last']" [infiniteScrollDistance]="0">
        <div *ngFor="let entry of entries; trackBy: trackId">
            <a [routerLink]="['/entry', entry.id, 'view' ]">
                <h2>{{entry.title}}</h2>
            </a>
            <small>Posted on {{entry.date | date: 'short'}} by {{entry.blog.user.firstName}}</small>
            <div [innerHTML]="entry.content"></div>
            <div class="btn-group mb-2 mt-1">
                <button type="submit"
                        [routerLink]="['/entry', entry.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">Edit</span>
                </button>
                <button type="submit"
                        [routerLink]="['/', 'entry', { outlets: { popup: entry.id + '/delete'} }]"
                        replaceUrl="true"
                        queryParamsHandling="merge"
                        class="btn btn-danger btn-sm">
                    <fa-icon [icon]="'times'"></fa-icon>
                    <span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Delete</span>
                </button>
            </div>
        </div>
    </div>
</div>

Figure 14. Blog entries

Lock It Down!

Optional<Blog> blog = blogRepository.findById(id);
if (blog.isPresent() && <user doesn't match current user>) {
    return new ResponseEntity<>("error.http.403", HttpStatus.FORBIDDEN);
}
return ResponseUtil.wrapOrNotFound(blog);

@PostMapping("/blogs")
public ResponseEntity<?> createBlog(@Valid @RequestBody Blog blog) throws URISyntaxException {
    log.debug("REST request to save Blog : {}", blog);
    if (blog.getId() != null) {
        throw new BadRequestAlertException("A new blog cannot already have an ID", ENTITY_NAME, "idexists");
    }
    if (!blog.getUser().getLogin().equals(SecurityUtils.getCurrentUserLogin().orElse(""))) {
        return new ResponseEntity<>("error.http.403", HttpStatus.FORBIDDEN);
    }
    Blog result = blogRepository.save(blog);
    return ResponseEntity.created(new URI("/api/blogs/" + result.getId()))
        .headers(HeaderUtil.createEntityCreationAlert(applicationName, true, ENTITY_NAME, result.getId().toString()))
        .body(result);
}

@PutMapping("/blogs")
public ResponseEntity<?> updateBlog(@Valid @RequestBody Blog blog) throws URISyntaxException {
    log.debug("REST request to update Blog : {}", blog);
    if (blog.getId() == null) {
        throw new BadRequestAlertException("Invalid id", ENTITY_NAME, "idnull");
    }
    if (blog.getUser() != null &&
        !blog.getUser().getLogin().equals(SecurityUtils.getCurrentUserLogin().orElse(""))) {
        return new ResponseEntity<>("error.http.403", HttpStatus.FORBIDDEN);
    }
    Blog result = blogRepository.save(blog);
    return ResponseEntity.ok()
        .headers(HeaderUtil.createEntityUpdateAlert(applicationName, true, ENTITY_NAME, blog.getId().toString()))
        .body(result);
}

@GetMapping("/blogs/{id}")
public ResponseEntity<?> getBlog(@PathVariable Long id) {
    log.debug("REST request to get Blog : {}", id);
    Optional<Blog> blog = blogRepository.findById(id);
    if (blog.isPresent() && blog.get().getUser() != null &&
        !blog.get().getUser().getLogin().equals(SecurityUtils.getCurrentUserLogin().orElse(""))) {
        return new ResponseEntity<>("error.http.403", HttpStatus.FORBIDDEN);
    }
    return ResponseUtil.wrapOrNotFound(blog);
}

@DeleteMapping("/blogs/{id}")
public ResponseEntity<?> deleteBlog(@PathVariable Long id) {
    log.debug("REST request to delete Blog : {}", id);
    Optional<Blog> blog = blogRepository.findById(id);
    if (blog.isPresent() && blog.get().getUser() != null &&
        !blog.get().getUser().getLogin().equals(SecurityUtils.getCurrentUserLogin().orElse(""))) {
        return new ResponseEntity<>("error.http.403", HttpStatus.FORBIDDEN);
    }
    blogRepository.deleteById(id);
    return ResponseEntity.noContent().headers(HeaderUtil.createEntityDeletionAlert(applicationName, true, ENTITY_NAME, id.toString())).build();
}

A JHipster application can be deployed anywhere a Spring Boot application can be deployed.

JHipster ships with support for deploying to Cloud Foundry, Heroku, Kubernetes, AWS, and AWS with Boxfuse. I’m using Heroku in this example because it doesn’t cost me anything to host it.

When you prepare a JHipster application for production, it’s recommended to use the pre-configured “production” profile. With Maven, you can package your application by specifying the prod profile when building.

The production profile is used to build an optimized JavaScript client. You can invoke this using webpack by running yarn run webpack:prod. The production profile also configures gzip compression with a servlet filter, cache headers, and monitoring via Micrometer. If you have a Graphite server configured in your application-prod.yml file, your application will automatically send metrics data to it.

When you run this command, you’ll likely get a test failure.

The reason this happens is in a stack trace in your terminal.

To fix this, you can use Spring Security Test’s @WithMockUser. Open BlogResourceIT.java and inject UserRepository as a dependency.

Change the createEntity() method so it’s not static and uses the userRepository to set a user on the blog entity.

Add @WithMockUser to the createBlog(), getAllBlogs(), getBlog(), updateBlog() and deleteBlog() methods. Below is an example of how each method should look.

After fixing this test, you should be able to run ./mvnw -Pprod verify without any failures.

To deploy this application to Heroku, I logged in to my account using heroku login from the command line. I already had the Heroku CLI installed.

I ran jhipster heroku as recommended in the Deploying to Heroku documentation. I used the name “jhipster6-demo” for my application when prompted. I selected “Git (compile on Heroku)” as the type of deployment.

I ran heroku open, logged as admin and was pleased to see it worked!

I hope you’ve enjoyed learning how JHipster can help you develop modern web applications! It’s a nifty project, with an easy-to-use entity generator, a pretty UI, and many Spring Boot best-practice patterns. The project team follows five simple policies, paraphrased here:

1. The development team votes on policies.

2. JHipster uses technologies with their default configurations as much as possible.

3. Only add options when there is sufficient added value in the generated code.

4. For the Java code, follow the default IntelliJ IDEA formatting and coding guidelines.

5. Use strict versions for third-party libraries.

These policies help the project maintain its sharp edge and streamline its development process. If you have features you’d like to add or if you’d like to refine existing features, you can watch the project on GitHub and help with its development and support. We’re always looking for help!

Now that you’ve learned how to use Angular, Bootstrap 4, and Spring Boot with JHipster, go forth and develop great applications!

To learn more about JHipster and all it has to offer, look no further than Full Stack Development with JHipster by Deepu K Sasidharan and Sendil Kumar. Both Deepu and Sendil have contributed an incredible amount of time and code to JHipster. We’ve very luck to have them. They’re both amazing developers! ❤️

JHipster’s awesome community has starred in some excellent online training videos too:

• Angular 4 Java Developers by Dan Vega and John Thompson

• Scaffolding Spring Boot and Angular Web Apps with JHipster by Michael Hoffman

• JHipster: Build and Deploy Spring Boot Microservices by Chris Anatalio

Follow @java_hipster on Twitter for release announcements, articles, new features, and upcoming talks.

The source code for this project is available on GitHub at mraible/jhipster6-demo.

Travis CI is continually testing this project with configuration from its .travis.yml file. This file was generated using jhipster ci-cd and everything passed on the first try!

Matt Raible is a web developer, Java Champion, and Developer Advocate at Okta. Matt is a frequent contributor to open source and a big fan of Java, IntelliJ, TypeScript, Angular, and Spring Boot. When he’s not slinging code with open source frameworks, he likes to ski with his family, restore classic VWs, and enjoy craft beer.

Matt writes on the Okta developer blog, for InfoQ, and on his personal blog. You can find him on Twitter @mraible.

Matt is a developer on the JHipster team, authored the JHipster Mini-Book, and helped create Play by Play: Developing Microservices and Mobile Apps with JHipster.