One Framework a Day keeps the Boredom Away: JHipster

Welcome to this new edition of One Framework a Day keeps the Boredom Away. In this series I will show you how to deploy a particular framework on Clever Cloud every day until I want to go back to boredom. Today it's about JHipster.

In each post of this series we'll see how to deploy a particular framework on Clever Cloud. Today we are taking a look at JHipster.

If you want to tag along, make sure you have git, a Clever Cloud account and that you have installed our CLI Clever-Tools.

What is JHipster?

JHipster is a development platform to generate, develop and deploy Spring Boot + Angular Web applications and Spring microservices.

JHipster, not your grandma's Yeoman generator, has been around for quite some time now and seems to be one of the default solution to scafold a modern SpringBoot+Angular stack. It supports many different options for both frontend and backend. Some of these supported by Clever Cloud.

So today we are going to deploy a JHipster stack based on MySQL. We are doing this mostly because our good friends Stephan Janssen and Antonio Goncalves told us they would love to see a JHipster/Clever Cloud integration. Before any convenient integration, I need to know how it works 🙂

Setup

Here are the steps to create and deploy a JHipster/MySQL application to Clever Cloud:

• First make sure you have installed JHipster: yarn global add generator-jhipster
• Create a folder for your future application: mkdir clever-jhipster && cd clever-jhipster
• Run JHipster and follow instructions on screen jhipster
• Make sure you select MySQL and Maven in the wizard
• Create the MySQL database: clever addon create mysql-addon --plan dev --region eu jhipstersql
• Create the Clever Cloud application: clever create --type maven cleverJHipster
• Link your database to your application: clever service link-addon jhipstersql
• Create a clevercloud folder at the root of your project: mkdir clevercloud
• Create a maven.json file with the following content: vim clevercloud/maven.json

{
  "build": {
    "type": "maven",
    "goal": "-Pprod package -DskipTests"
  },
  "deploy": {
    "jarName": "./target/jhipster-0.0.1-SNAPSHOT.war"
  }
}

This file tells Clever Cloud to run mvn -Pprod package -DskipTests and then java -jar ./target/my-app-0.0.1-SNAPSHOT.war. Don't forget to change the jarName according to the name of your project.

Now to configure the application we will create aclevercloud/application-clever.yml file containing all the specific configuration to run on Clever Cloud.

spring:
    datasource:
        url: jdbc:mysql://${MYSQL_ADDON_HOST}:${MYSQL_ADDON_PORT}/${MYSQL_ADDON_DB}?useUnicode=true&characterEncoding=utf8&useSSL=false
        username: ${MYSQL_ADDON_USER}
        password: ${MYSQL_ADDON_PASSWORD}
        maxActive: 5

Here I am using variable already predefined by CleverCloud with the ${} synthax. To make sure this file is found while running the application, we need to copy it right before running with a hook: clever env set CC_PRE_RUN_HOOK "cp ./clevercloud/application-clever.yml ./application-prod.yml"

Deploy

Select the build dedicated instance because the JHipster build is memory greedy. To do that you have to go on the WebConsole, in your application, in the Information tab and tick the Enable dedicated build instance checkbox.

Now commit your changes and run clever deploy, this will push your code to our remote git branch and deploy it. At the end you can type clever open and it should open your website in your default web browser.

We plan to have a better integration to JHipster through a module. What kind of features would you like to have?