armin

About Armin Engesser

Komplett ausgefülltes Profil

Create an AngularJS + Spring Boot + Gradle project using Yeoman with JHipster and deploy it to cloudControl

Installation prerequisites

Before we can start with the real development we need to have a couple of tools installed. Please make sure you have installed the following:
* Node.js
* Yeoman via npm (npm install -g yo)
* Bower (npm install -g bower)
* Grunt (npm install -g grunt-cli) or Gulp.js (npm install -g gulp)
* JHipster generator (npm install -g generator-jhipster)
* cloudControl command line tool (link)

Generate a project

We will start by generating our project using „yo jhipster“ and answering the provided questions. In this example we will use the following settings:
* Java 7
* Authentication Type: HTTP Session
* DB Type: NoSQL (MongoDB)
* Clustered HTTP Sessions: No
* Websockets: No
* Backend Building: Gradle
* Frontend Building: Grunt
* Compass CSS: No

After answering the questions the project skeleton will be generated. This might take a couple of seconds. The generated project is already able to run locally even if it does not have any custom functionality.
Entities and their fields can be added through „yo jhipster:entity„. With this, not only the entity itself is generated but also a corresponding Repository, a REST-Controller and the frontend websites, realised with AngularJS.
Please note that relationships between these entities are not possible through this command as we have chosen MongoDB as our database. Nevertheless we can add them manually if needed.

Assuming AngularJS, Java and Spring Boot are well known to you, let’s come to the more interesting part and deploy the whole thing to cloudControl.

Deploy to cloudControl

As it comes to create a new app on cloudControl, you will notice that there are no mixtures of projects available.

[[You can either choose Java or Node.js but we will need to have both to build our project. ]] I found two ways of to accomplish that, a quite simple one with the com.moowork.node plugin and another one, way more complicated and of course this was my first attempt, using slightly modified buildpacks.

Node-Plugin

The Hipster generator already includes the com.mooword.node-plugin in the production profile. So in theory all we have to do is to ensure executing the correct profile. Unfortunately it does not work out of the box, but with a minor modification of said file (profile_prod.gradle), according to the plugin’s documentation, we can make it work.

node {
// Version of node to use.
version = '0.11.10'

// Version of npm to use.
npmVersion = '2.1.5'

// Base URL for fetching node distributions (change if you have a mirror).
distBaseUrl = 'http://nodejs.org/dist'

// If true, it will download node using above parameters.
// If false, it will try to use globally installed node.
download = true

// Set the work directory for unpacking node
workDir = file("${project.buildDir}/nodejs")
}

MongoDB

JHipster has generated some property files for us in the src/main/resources/config folder where we can add our database connection settings for each profile.
If you do use a shared MongoDB instance as I did for this example, you will get an exception at runtime even if you did provide the correct db connection properties. This is because the generated DatabaseConfiguration.java contains a Mongeez Bean which sets up a couple of tables in your database for your user management. Unfortunately it uses the $eval command to do so, which is only allowed on admin accounts. So get rid of this Bean and it should work perfectly fine.

spring:
- profiles:
-- active: prod
- data:
-- mongodb:
--- username:
--- password:
--- host:
--- port: --- database:

Procfile

Before we can deploy our project to cloudControl we need to create a so called Procfile with some information about the start point of our application. In our case a single line should do it: web: ./build/install/<app-name>/bin/<app-name>. This referenced file is then created by the gradle task stage which we need to define first in the build.gradle file as the following:
task stage(dependsOn: ['clean', 'installApp']) &lt;&lt; { }

Got it. Now deploy this stuff.

After all the hard work we can finally deploy our application to cloudControl. As you are an experienced developer I assume you do know how to handle Git. So just commit you changes and use the cloudControl command line tool to push it:
cctrlapp <app-name>/default push
After a short time we hopefully get the message that the push was successful. So the only thing left is to deploy the whole thing:
cctrlapp <app-name>/default deploy --memory 256MB
Even if the memory parameter is optional, I recommend to set it to at least 256MB. Otherwise the container may not come up.

tl;dr

  • generate project with „yo jhipster
  • add node block with settings to profile_prod.gradle
  • set MongoDB settings in src/main/resources/config
    ** may get rid of Mongeez-Bean in DatabaseConfiguration.java
  • add Procfile
  • deploy „cctrlapp <app-name>/default deploy [--memory 256MB]
  • be happy

Alternative

My first approach to achieve a running application was quite another, way more complicated. one I specified the app as custom on cloudControl and used the heroku-buildpack-multi. This buildpack then triggered two other buildpacks, originally provided by cloudControl. The first was the buildpack-nodejs to get an installation of Node.js and npm on the container and afterwards a slightly modified version of the buildpack-gradle with an import of these previously installed items in the PATH, so that the gradle tasks could make use of it.
The most significant difference was the .buildpacks-file in which links to the Git repository of the two mentioned buildpacks were set.

Therefore we will not create a new project through the website but a custom one by using the command line tool provided by cloudControl.
We can do so with the simple command: cctrlapp create custom --buildpack where the „ refers to a Git-Repository in which a build pack is provided (non-ssh).

2017-05-05T15:16:36+00:0018. Juli 2016|Allgemein|