How to Use JHipster to Build a Secure Micronaut and Angular App
Join the DZone community and get the full member experience.Join For Free
A new framework for developing JVM applications (including APIs and Microservices) is Micronaut. Micronaut uses AOT, or ahead-of-time compilation to calculate the information your application requires before runtime, which cuts down on the overall time without the need for reflection. In addition, time is saved by the decrease in both the runtime overhead and startup time, as well as a large increase in application throughput. As a direct competitor to Spring Boot, Micronaut was created by the same people who invented Grails, specifically designed to benefit those working with modern, resource-constrained environments such as serverless, both with the benefits from its design and runtime efficiency.
JHipster is a multifaceted platform, for developing, generating, and deploying modern web applications and microservice architectures. Using AngularJS in its first version for the frontend, it now uses Angular 10. The addition of Micronaut and other backend applications is relatively new, as Spring Boot was traditionally the only backend implementation.
This tutorial will teach you how to use the sleek new Micronaut blueprint for JHipster. This supports Micronaut 2.0 and deploying to Heroku, in addition to adding Okta with only one command. I hope you enjoy this blog post!
Build a Micronaut App With JHipster
JHipster has its own domain language called JDL (JHipster Domain Language). JDL can be used to describe an app, entities, relationships between entities, and even deployments. In this tutorial, I’ll show you how to build a simple app that allows you to record space launches and add images to the event. It will look similar to NASA’s Launches and Landings.
Install JHipster and the Micronaut blueprint using npm:
Design a Micronaut Data Model With JHipster’s JDL
JHipster has defaults for all of its options. You can create a new app using the
jhipster command—hold down the enter key when prompted with choices, and your app will be created with the defaults. JDL allows you to create an application definition where you only override the defaults. For example, you could create an app with OAuth 2.0 and OpenID Connect (OIDC) for authentication using the following JDL:
Create a new directory called
spacefan. Add an
app.jdl file to it and populate it with the following code.
The app definition overrides the name, authentication type, production database, and test frameworks.
Entity definitions with validation rules.
Relationships between entities.
Pagination rules can be defined for each entity.
Note: You can find additional JDL samples on GitHub in the jdl-samples repository.
Generate a Micronaut app with Angular
Open a terminal and navigate to the
spacefan directory you created. Run the following command to create an Angular app with a Micronaut backend.
This process will create a plethora of files for your application and run
npm install. When it’s finished, you’ll need to start Keycloak.
Note: If you’re an Oh My Zsh fan, you can install the Oh My Zsh JHipster plugin and just type
Keycloak is the default OIDC engine that’s used by JHipster, and you can run it in a Docker container. In your project’s
src/main/docker folder, there’s a Docker Compose file for Keycloak, as well as default users, realms, and applications. Keycloak imports these on startup.
What About React and Vue.js?
You might have noticed I didn’t specify a client framework. I didn’t need to because Angular is the default. If you want to use React instead, you simply need to add a
clientFramework react line to the application definition in your JDL. For example:
Note: You can see all the default options in JHipster’s documentation.
If you want to use Vue.js instead of React, it’s a little more complicated. The Micronaut blueprint modifies Angular and React templates. These modifications will likely be needed for Vue as well. Since Vue will be integrated into JHipster in v7.0, it’s probably best to wait until it’s released before you try Micronaut and Vue.
If you really want to try Vue with Micronaut, you can. You might need to modify the Vue files to work with Micronaut after you generate your project.
First, you’ll need to install the Vue.js blueprint:
Then you’ll need to import the JDL and specify both Micronaut and Vue.js as blueprints.
Confirm Authentication With Keycloak Works
With Keycloak up and running, you should be able to log in. Start your app using Maven:
When it finishes launching, go to
http://localhost:8080 in your favorite browser and click the sign in link.
Your app will redirect you to Keycloak to log in. Use
admin/admin to log in as an administrator.
You can browse through the Administration section by clicking on the Administration menu.
Go to Entities > Space Events to add new events and missions.
You might notice how both space events and missions have existing data. This is from Faker.js and Liquibase. Liquibase is used to create your database tables, and Faker.js is used to create fake data in development. If you want to turn off fake data, you can open
src/main/resources/application-dev.yml and search for
faker. Remove it from the list of active profiles for Liquibase.
Since you chose Protractor for testing, you can ensure all the client code works by running the following command in a second terminal window. (Your JHipster app should still be running in the first.)
You should see a message saying that all tests have passed.
The pauses for alerts when running end-to-end tests is a known issue.
Prepare Micronaut for Production
JHipster ships with profiles for development and production. In development, everything is designed to be fast for the developer. In production, everything should be quick for your users. When you build your app with the
prod profile enabled, Micronaut is optimized with less logging and PostgreSQL. On the client side, scripts are optimized, CSS is minimized, and HTML is streamlined.
Deploy Micronaut to Heroku
Since JHipster has production optimizations built in, you’re ready to deploy your app to Heroku!
To begin, you must install the Heroku CLI, and have created a Heroku account. You will need to verify your Heroku account with a credit card as a security measure. JHipster won’t add any add-ons that cost money, but Heroku requires a credit card on file to provision some add-ons.
Stop your app. Then, run the following command:
When prompted for type of deployment, choose Git. Use 11 for the Java version and select Yes to provision the Okta add-on. Enter your email for the JHipster Admin user and an initial password. When prompted to overwrite
a to overwrite it.
This process can take a while to complete. When I tried it, it took seven minutes.
When the deployment process finishes, open your favorite browser to the URL in your console or run
You should be able to log in using the email and password you provided. Okta will prompt you to change your password and set a security question (for password recovery).
You can also deploy your JHipster app as a Docker container! In Angular + Docker with a Big Hug from Spring Boot, I showed you how to deploy Spring Boot to Heroku as a container. I also showed how you can deploy that same image to Knative on Google Cloud and Cloud Foundry. Once you have a JHipster + Micronaut image built, you can use those same instructions to deploy to those platforms.
In the next section, I’ll show how to deploy your container to Heroku.
Micronaut + Docker on Heroku
JHipster uses Jib to build Docker images for your application. Run the following command to create a Docker image.
You can test it out locally using Docker Compose.
To make Keycloak work, you need to add the following line to your hosts file (
/etc/hosts on Mac/Linux,
c:\Windows\System32\Drivers\etc\hosts on Windows).
This is because you will access your application with a browser on your machine (which is named localhost, or
127.0.0.1), but inside Docker, it will run in its own container, which is named
Once you’ve confirmed everything works, create a new app on Heroku, and add it as a remote.
Then run the commands below to deploy your Micronaut app as a Docker image. Be sure to replace the
<…> placeholders with your Heroku app name. If you don’t know your app name, run
For example, I used:
At this point, you can use the PostgreSQL and Okta add-ons you’ve already configured. Run the following command to get the identifiers of the add-ons from the
heroku remote that you first deployed to.
Then you can attach these instances to your new application.
When you use
mhipster heroku to deploy your application, it properly configures the database for you. However, when deploying it as a Docker container, none of that happens. Therefore, you need to set a few configuration variables so your Docker container can talk to PostgreSQL. First, run the following command to get the PostgreSQL URL.
This command will retrieve a value with the following syntax:
Then, set the database environment variables to match the keys that are in
Set the max amount of Java memory to use and specify the Micronaut environments.
Now you should be able to release your container and start the app.
You can watch the logs to see if your container started successfully.
Now you should be able to open your app, click the sign in link, and authenticate!
If you test your Dockerized Angular + Micronaut app on securityheaders.com, you’ll see it scores an A!
If you want to log in to this app, you’ll need to add login and logout redirect URIs to your Okta Web app. To access it, open dashboard.heroku.com in a private window. Log in and go to $docker-app-name > Resources > okta. After you’re redirected to Okta, you should see your developer dashboard. If you don’t, log out of Okta and try again. Then, go to Applications > Web > General > Edit.
For example, I added the following to mine:
Login redirect URI: https://infinite-crag-99454.herokuapp.com/oauth2/callback/oidc
Logout redirect URI: https://infinite-crag-99454.herokuapp.com/logout
If you make save these changes and try to log in to your app again, you’ll likely receive an error message:
This happens when you try to log in with the super admin that the Okta add-on creates. Try logging in using a private window and it should work as expected.
Deploying a Micronaut app to Heroku in a Docker container is a little more difficult because JHipster doesn’t configure PostgreSQL and Okta for you. However, setting a few environment variables is all you need to get things up and running.
Discover More About Micronaut and JHipster
I hope you enjoyed this whirlwind tour of Micronaut and JHipster. You can find the example created in this tutorial on GitHub.
If you’re interested in learning more about the Micronaut blueprint, see the generator-jhipster-micronaut project on GitHub. You can even earn money from the JHipster project by contributing to its open issues.
If you’re interested in a performance comparison of Spring Boot and Micronaut in JHipster, see OCI’s Practical Performance Comparison of Spring Boot, Micronaut 1.3, and Micronaut 2.0.
I hope you liked this hip tutorial! Here are some other ones that you might enjoy.
If you have any questions, please ask them in the comments below.
Published at DZone with permission of Matt Raible, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.