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

Modernize your application architectures with microservices and APIs with best practices from this free virtual summit series. Brought to you in partnership with CA Technologies.

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 Integration Zone is proudly sponsored by CA Technologies. Learn from expert microservices and API presentations at the Modernizing Application Architectures Virtual Summit Series.

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

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}