Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Creating Java-Based Microservices for Abixen Platform: Part 2

DZone's Guide to

Creating Java-Based Microservices for Abixen Platform: Part 2

Learn to configure your functional Java-based microservice on the Abixen Platform for separated microservices in your application.

· Integration Zone ·
Free Resource

The new Gartner Critical Capabilities report explains how APIs and microservices enable digital leaders to deliver better B2B, open banking and mobile projects.

This article is the next one from the series I have started. The first article explained mostly a configuration of the POM file, which is important for all the features of Abixen Platform, which can be reached on GitHub as an open source, Java-based microservices project.

Since in the series I’m going to go through a standard process of creation a microservice contained a frontend layer, this article has been dedicated to configuration of web-based tools.

Configuration of a Frontend Layer

The application will be using Node Package Manager (NPM). Based on this, we have to create a package.json file:

{
  "name": "abixen-platform-web-content-service",
  "version": "1.0.0",
  "dependencies": {
    "bower": "^1.7.7",
    "del": "^2.2.0",
    "gulp": "^3.9.1",
    "gulp-concat-sourcemap": "^1.3.1",
    "gulp-htmlmin": "^1.3.0",
    "gulp-if": "^2.0.0",
    "gulp-jscs": "^3.0.2",
    "gulp-jshint": "^2.0.0",
    "gulp-order": "^1.1.1",
    "gulp-sass": "^2.2.0",
    "jshint": "^2.9.1",
    "jshint-stylish": "^2.1.0",
    "merge-stream": "^1.0.0",
    "run-sequence": "^1.1.5",
    "fs": "0.0.2",
    "gulp-bower": "0.0.10",
    "gulp-bump": "^0.3.0",
    "gulp-concat": "^2.5.2",
    "gulp-merge": "^0.1.0",
    "gulp-minify-css": "^1.0.0",
    "gulp-minify-html": "^1.0.1",
    "gulp-notify": "~2.2.0",
    "gulp-rename": "^1.2.0",
    "gulp-replace": "^0.5.3",
    "gulp-token-replace": "^1.0.2",
    "gulp-uglify": "^1.1.0",
    "gulp-usemin": "0.3.12",
    "gulp-util": "^3.0.4",
    "gulp-webserver": "~0.9.1",
    "gulp-angular-templatecache": "^2.0.0",
    "gulp-ignore": "~2.0.2"
  },
  "config": {
    "registry": "http://registry.npmjs.org/"
  },
  "scripts": {
    "postinstall": "bower install"
  },
  "devDependencies": {
    "jscs": "^2.11.0"
  }
}

The file contains mainly Gulp dependencies.  Gulp is an application which triggers static resource processing. The next important dependency is Bower, because Abixen Platform uses Bower Components for static dependencies. The last relevant library is JSHint, which takes care of detection of errors and potential problems in the JavaScript code.

Therefore, the application refers to Bower Components, so there is a need to add a bower.json file:

{
  "name": "abixen-platform-web-content-service",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "angular": "1.4.7",
    "angular-resource": "1.4.7",
    "angular-route": "1.4.7",
    "angular-animate": "1.4.7",
    "angular-touch": "1.4.7",
    "angular-ui-router": "0.2.15",
    "angular-aside": "1.3.0",
    "angular-ui-grid": "3.0.7",
    "angular-translate": "2.8.1",
    "angular-cookies" : "1.4.7"
  }
}


The next file required to a proper configuration is gulpfile.js:

'use strict';

var gulp = require('gulp'),
    gulpIf = require('gulp-if'),
    mapConcat = require('gulp-concat-sourcemap'),
    order = require('gulp-order'),
    sass = require('gulp-sass'),
    htmlMin = require('gulp-htmlmin'),
    minifyCss = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    jsHint = require('gulp-jshint'),
    jscs = require('gulp-jscs'),
    gutil = require('gulp-util'),
    merge = require('merge-stream'),
    runSequence = require('run-sequence'),
    ignore = require('gulp-ignore'),
    del = require('del'),
    config = require('./build-config'),
    templateCache = require('gulp-angular-templatecache'),
    devMode = true;

gulp.task('clean', cleanTask);
gulp.task('templates', templatesTask);
gulp.task('templateCache', templateCacheTask);
gulp.task('applicationTemplateCache', applicationTemplateCacheTask);
gulp.task('adminScripts', adminScriptsTask);
gulp.task('adminStyles', adminStylesTask);
gulp.task('applicationScripts', applicationScriptsTask);
gulp.task('applicationStyles', applicationStylesTask);
gulp.task('build', buildTask);
gulp.task('adminLibs', adminLibsTask);
gulp.task('dev', ['build'], devTask);
gulp.task('default', ['build']);
gulp.task('angularTemplateCache', ['templateCache']);

function cleanTask() {
    return del(config.dest.files);
}

function templatesTask() {
    return gulp.src(config.templates.files)
        .pipe(htmlMin(config.templates.minifyOpts))
        .on('error', gutil.log)
        .pipe(gulp.dest(config.dest.dir));
}

function templateCacheTask(){
    return gulp.src(config.templates.files)
        .pipe(templateCache('web-content-service.templatecache.js', {module : 'webContentServiceTemplatecache' }))
        .pipe(gulp.dest(config.dest.templateCache));
}

function applicationTemplateCacheTask(){
    return genericTemplateCacheTask(config.templates.files, config.dest.applicationTemplateCache);
}

function adminScriptsTask() {
    return genericScriptsTask(config.scripts.adminFiles, config.dest.adminScripts);
}

function applicationScriptsTask() {
    return genericScriptsTask(config.scripts.applicationFiles, config.dest.applicationScripts);
}

function genericScriptsTask(sourceScriptsPath, destinationScriptsPath) {
    return gulp.src(sourceScriptsPath)
        .pipe(jsHint())
        .pipe(jsHint.reporter('jshint-stylish'))
        .pipe(gulpIf(!devMode, jsHint.reporter('fail')))
        .pipe(jscs())
        .pipe(jscs.reporter())
        .pipe(gulpIf(!devMode, jscs.reporter('fail')))
        .pipe(order(config.scripts.concatOrder, {base: '.'}))
        .pipe(mapConcat(destinationScriptsPath, {sourcesContent: true}))
        .pipe(gulp.dest(config.dest.dir));
}

function adminStylesTask() {
    return genericStylesTask(config.styles.adminSass, config.dest.adminStyles);
}

function applicationStylesTask() {
    return genericStylesTask(config.styles.applicationSass, config.dest.applicationStyles);
}

function genericStylesTask(sourceSassPath, destinationStylesPath) {
    return gulp.src(sourceSassPath)
        .pipe(sass().on('error', sass.logError))
        .pipe(mapConcat(destinationStylesPath))
        .pipe(minifyCss())
        .pipe(gulp.dest(config.dest.dir));
}

function buildTask(callback) {
    runSequence('clean',
        'angularTemplateCache',
        'adminLibs',
        [
            'adminScripts',
            'templates',
            'adminStyles'
        ],
        [
            'applicationScripts',
            'applicationStyles'
        ],
        callback);
}

function adminLibsTask() {
    return gulp.src(config.adminLibs.files)
        .pipe(gulp.dest(config.dest.adminLibs));
}

function devTask() {
    devMode = true;
    gulp.watch(config.scripts.adminFiles, ['adminScripts']);
    gulp.watch(config.templates.files, ['templates','angularTemplateCache']);
    gulp.watch(config.styles.adminWatch, ['adminStyles']);
}

This one contains a configuration of Gulp tasks. The file keeps definitions of tasks building templates, JavaScripts, and styles. There are tasks for applications (in Abixen Platform application part means a side with a dashboard) and for admin (Control Panel). The tasks can perform inter alia concatenations, conversions from Sass to CSS, minifying of CSS, and uglifying of JavaScripts.

The gulphile.js has reference to build-config.js file which comprises mostly paths to files have to be processed. This file is a legible manner to separate a configuration from a code with a logic. Below has been presented a listing of the file:

'use strict';

module.exports = {
    dest: {
        dir: 'src/main/resources/static',
        files: 'src/main/resources/static/**',
        adminLibs: 'src/main/resources/static/service/abixen/web-content/control-panel/lib',
        adminScripts: 'service/abixen/web-content/control-panel/web-content.min.js',
        adminStyles: 'service/abixen/web-content/control-panel/web-content.min.css',
        templateCache: 'src/main/web/service/abixen/web-content/control-panel/js',
        applicationScripts: 'service/abixen/web-content/application/web-content.min.js',
        applicationStyles: 'service/abixen/web-content/application/web-content.min.css',
        applicationTemplateCache: 'src/main/web/service/abixen/web-content/application/javascript',
        applicationLibs: 'src/main/resources/static/service/abixen/web-content/application/lib'

    },
    adminLibs: {
        files: [
        ]
    },
    templates: {
        files: 'src/main/web/**/*.html',
        minifyOpts: {
            removeComments: true,
            removeCommentsFromCDATA: true,
            collapseWhitespace: true,
            conservativeCollapse: false,
            collapseInlineTagWhitespace: true,
            preserveLineBreaks: false,
            useShortDoctype: true,
            keepClosingSlash: true,
            caseSensitive: true,
            quoteCharacter: '"'
        }
    },
    scripts: {
        adminFiles: [
            'src/main/web/service/abixen/web-content/control-panel/**/*.js'
        ],
        applicationFiles: [
            'src/main/web/service/abixen/web-content/application/**/*.js'
        ],
        concatOrder: [
            'src/main/web/**/*templatecache.config.js',
            'src/main/web/**/*.module.js',
            'src/main/web/**/*.js'
        ]
    },
    styles: {
        adminWatch: [
            'src/main/web/service/abixen/web-content/control-panel/**/*.scss'
        ],
        adminSass: [
            'src/main/web/service/abixen/web-content/control-panel/scss/web-content.scss'
        ],
        applicationWatch: [
            'src/main/web/service/abixen/web-content/application/**/*.scss'
        ],
        applicationSass: [
            'src/main/web/service/abixen/web-content/application/scss/web-content.scss'
        ]
    }
};


What Next?

In the first two articles of this series, I have gone through a configuration of both a backend and a frontend layer. In the next article, I’m going to show how to setup the required Spring configurations.

The new Gartner Critical Capabilities for Full Lifecycle API Management report shows how CA Technologies helps digital leaders with their B2B, open banking, and mobile initiatives. Get your copy from CA Technologies.

Topics:
microservices ,java ,abixen platform ,tutorial ,integration

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}