Wednesday, September 20, 2017

Vue + Vuetify + Nuxt + Heroku

I want to learn how to build a SSR front-end application in Vue and have been playing around with Vuetify, Nuxt.js and Heroku. These are the steps I followed to get the Vuetify Nuxt.js starter template deployed to Heroku.

Create GitHub repository

I created a GitHub repository and cloned it to a directory on my local computer.

Initialise starter template

  • Before you begin make sure you have Node.js and vue-cli installed
  • Open a command prompt and change into the directory of your git project
  • Follow the instructions on the vuetify/nuxt github project

Install Heroku CLI

The Heroku Command Line Interface (CLI), formerly known as the Heroku Toolbelt, is a tool for creating and managing Heroku apps from the command line / shell of various operating systems.

Follow these instructions to install the Heroku CLI to your computer. 

Create an Heroku App

You can create an Heroku App online or through the Command Line Interface. Follow these instructions to create your Heroku app.

Heroku Deployment Configuration

I followed the steps outlined in the Nuxt.js support web page for Heroku apps. Although it didn't quite work on deployment as npm start was not building the application. I changed the package.json script section to build and then run on start. Not sure if this is correct but it worked for me.

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt build && nuxt start",
    "generate": "nuxt generate",
    "heroku-postbuild": "npm run build"
  }

Heroku Deployment 

To deploy your application (via Git) to Heroku you should run the following command:
  • git push heroku master
finstall If you want to deploy code to Heroku from a non-master branch of your local repository use the following syntax to ensure it is pushed to the remote’s master branch, example:
  • git push heroku mybranch:master

Heroku Local

In your to troubleshoot your application you can use the following command to run locally:
  • heroku local

Node.js Support

The following page has some useful information for Node.js application running on Heroku. 

Wednesday, September 13, 2017

Vue + Webpack + Bootstrap

I created a simple Vue, Webpack and Bootstrap template to showcase how to integrate Bootstrap with Vue using Webpack.

Dependencies 

Required Dependencies

  • bootstrap
  • css-loader
  • file-loader

Optional Dependencies 

  • jquery
  • popper.js

 package.js

{
  "name": "vue-webpack-bootstrap-template",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "bootstrap": "4.0.0-beta",
    "jquery": "^3.2.1",
    "popper.js": "^1.12.5",
    "vue": "^2.3.3"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-env": "^1.5.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "vue-loader": "^12.1.0",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

Webpack Configuration

Loaders

The following loaders need to be added to the webpack.config.js
 
 {
   test: /\.(png|jpg|gif|svg)$/,
   loader: 'file-loader',
   options: {
     name: '[name].[ext]?[hash]'
   }
 },
 {
   test: /\.css$/,
   loaders: ['style-loader','css-loader']
 },
 {
   test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
   loader: 'url-loader?limit=10000&mimetype=application/font-woff'
 },
 {
   test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
   loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
 },
 {
   test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
   loader: 'file-loader'
 }

Provide Plugin

If you optionally want to use Bootstrap for the components that make use of JQuery and Popper.js you will need to add the following plugin:
 new webpack.ProvidePlugin({
   $: 'jquery',
   jQuery: 'jquery',
  'window.jQuery': 'jquery',
   Popper: ['popper.js', 'default'],
   // In case you imported plugins individually, you must also require them here:
   Util: "exports-loader?Util!bootstrap/js/dist/util",
   Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown"
 })

Main.js

require('bootstrap/dist/css/bootstrap.css')

import Vue from 'vue'
import App from './App.vue'

import 'bootstrap'

new Vue({
  el: '#app',
  render: h => h(App)
})

BootstrapVue

Instead of doing the above you could use BootstrapVue dependency that is a library that creates Vue Bootstrap components. The following GitHub project is a simple bootstrap-vue template.

Tuesday, March 28, 2017

Quick steps to installing gnome-session and Metacity on RedHat and configuring vnc

The following is a quick guide to installing gnome-session and Metacity on RedHat and to configure VNC to use them.


Install gnome-session

sudo yum install gnome-session

Install Metacity

sudo yum install metacity


Configure VNC


cp ~/.vnc/xstartup ~/.vnc/xstartup.backup
vi ~/.vnc/xstartup
If the file contains the line twm & then remove it
Add the following to the bottom of the file:


gnome-session&
metacity&


Save your changes
Restart vncserver

Friday, February 10, 2017

JBoss EAP - Override Deployment Content

JBoss EAP - Override Deployment Content

A deployment overlay can be used to overlay content into an existing deployment without physically modifying the contents of the deployment archive. This can override deployment descriptors, JAR files, classes, JSP pages, and other files at runtime.

When defining a deployment overlay, you specify the file on a file system that will replace the file in the deployment archive. You must also specify which deployments should be affected by the deployment overlay. Any affected deployments must be redeployed in order for the changes to take effect.

JBoss CLI

Start the JBoss application server and run the jboss-cli command tool in the bin folder of your JBoss EAP install directory
  jboss-cli.sh --controller=: -c

Example:
  jboss-cli.sh --controller=localhost:9999 -c

Find name of deployments

[standalone@localhost:9999 /] /deployment=*:read-attribute(name=name)
{
    "outcome" => "success",
    "result" => [{
        "address" => [("deployment" => "my-app.war")],
        "outcome" => "success",
        "result" => "my-app.war"
     }]
}

Deployment overlay help

Display all the help for the deployment-overlay command

deployment-overlay --help

List links

Lists deployments the overlay is linked to:

  • deployment-overlay list-links --name=overlay_name [-l] [--server-groups=server_group_name(,server_group_name)*]

Example:
deployment-overlay list-links --name=my-app-deployment-overlay

Add action

Use the deployment-overlay add management CLI command to add a deployment overlay. Once created, you can add content to an existing overlay, link the overlay to a deployment, or remove the overlay.

Depending on the arguments the action:

  • always creates a new overlay with content;
  • optionally links it to the specified existing deployments;
  • also optionally re-deploys the affected (linked) deployments.

Options

  • name
    • overlay_name
  • content
    • archive_path=fs_path(,archive_path=fs_path)*. Comma-separated list that maps the file on the file system to the file in the archive that it will replace.
  • server-groups/all-server-groups
    • server_group_name(,server-group-name)*. In a managed domain, specify the applicable server groups by using --server-groups or specify all server groups with --all-server-groups.
  • deployments
    • deployment_name(,deployment_name)*. Comma-separated list of deployments to which this overlay will be linked.
  • wildcards
    • wildcard_name(,wildcard_name)*
  • redeploy-affected
    • Redeploys all affected deployments.
  • headers
    • {operation_header (;operation_header)*}


Examples
deployment-overlay add --name=my-app-deployment-overlay --content=WEB-INF/jboss-web.xml=/app/jboss-eap-6.4/standalone/deployment-overlay/jboss-web.xml --deployments=my-app.war --redeploy-affected

Nested deployments
If you have an zipped deployment with multiple zipped JAR's, WARs, etc. containing artifacts you want overlaying, then you need to include the name of the nested archive in the --content option. For example, if the EAR archive contains a war module in the root folder with the name my-app.war, then the following command overlays the WEB-INF/jboss-web.xml inside the sub-deployment my-app.war.
 deployment-overlay add --name=myOverlay --content=/my-app.war/WEB-INF/jboss-web.xml=/app/jboss-eap-6.4/standalone/deployment-overlay/jboss-web.xml --deployments=test.ear --redeploy-affected
Overlay Classes
 deployment-overlay add --name=classOverlay --content=/WEB-INF/classes/com/mydomain/MyClass.class=/app/jboss-eap-6.4/standalone/deployment-overlay/bin/com/mydomain/MyClass.class --deployments=my-app.war --redeploy-affected

Remove action

Depending on the arguments the action may:

  • unlink deployments (if --deployments or --wildcards argument is specified);
  • remove content (if --content argument is specified);
  • remove the overlay altogether with its content and links;
  • re-deploy affected deployments.

Options

  • name
    • overlay_name
  • content
    • archive_path=(,archive_path)*
  • server-groups/all-relevant-server-groups
    • server_group_name(,server_group_name)* 
  • deployments
    • deployment_name(,deployment_name)*
  • wildcards
    • wildcard_name(,wildcard_name)*
  • redeploy-affected
  • headers
    • {operation_header (;operation_header)*}


Examples
Unlink deployments
deployment-overlay remove --name=my-app-deployment-overlay --deployments=my-app.war



Tuesday, June 28, 2016

Play Framework 2.5 and Vue sample CRUD single page application

In my previous post I shared a link to a sample application I had built using the Play framework. That application works and is fine but the one thing I wanted to change was to have a Javascript template framework on the front-end so that I can easily update portions of the webpage with AJAX request and response calls to and from the server. There are many different approaches to accomplish this; you can do it all with Javascript but there are frameworks and libraries available that make this sort of thing a lot easier and cleaner to do. I have used Javascript template engines like Handlebars or DustJs in the past and they have worked quite nicely. There are even more modern frameworks available now that go the extra mile and make things even simpler and more powerful. AngularJS comes to mind. I spent some time learning and seeing how I can use AngularJS for my Play application but in the end I opted to use Vue.js instead. Vue was a lot easier to learn and to get up and running with than AngularJS was and it works amazingly well.

I started by creating a default Play application and reused most of the business-side logic I had used in the previous version of the app. I then created a folder in the root of my project called 'vue' and I put all my Vue related files in there. I am using Play as a RESTful service and Vue as a client-side rendering framework. The only Play Scala template I have is the index.scala.html page which references the bundled javascript file and defines the root element for the Vue application. The only reason I have this index file within Play is to do with the Javascript routing provided by Play. Having said that I think in the long run I will move the index file into the Vue project in order to make use of Vue's hot-reload feature.

If you are interested in this sample application I have built you can clone / downloaded it from here.

Introduction

This application is used to showcase the Play framework as well as Vue.js while learning basic Spanish phrases. This application makes use of the following:

Installing

Running

  • Open a command terminal and change into the sample application root directory
  • Run activator:
    • activator run
  • Run webpack: 
    • webpack --watch
  • Open the following link in a browser:
    • http://localhost:9000

Screenshots







Monday, June 27, 2016

Play Framework 2.5 sample CRUD application

I have had an interest in the Play framework for a number of year now and I have built a few small applications using the framework. The Play framework has evolved over time and in order to keep up to date with the most recent changes it's useful to try and build your own application. I have built a very simple CRUD application for this purpose.

If you are interested in application you can clone / downloaded it from here.

Introduction

This application is used to showcase Play framework while learning basic Spanish phrases. This application makes use of the following:

Installing

Running

  • Open a command terminal and change into the sample application root directory
  • Run activator:
    • activator run

Screenshots






Monday, February 1, 2016

Useful commands to monitor and troubleshoot HornetQ in JBoss EAP 6

The JBoss Enterprise Application Platform (JBoss EAP) is a Java EE application server runtime platform used for building, deploying, and hosting Java applications and services. JBoss EAP 6 is Java EE 6 certified with Red Hat support.

HornetQ is an open source project to build a multi-protocol, embeddable, very high performance, clustered, asynchronous messaging system and is also developed by Red Hat. HornetQ is the Java Message Service (JMS) provider for JBoss EAP 6 and is configured as the Messaging Subsystem.

The following contains a collection of useful commands and steps in monitoring and troubleshooting HornetQ. Note that the commands below were run on a Windows machine with a default standalone setup of JBoss EAP with the messaging subsytem configured and a test queue created.

Before you continue if you are attempting to do this in a production environment then it is very important to backup your messaging data folders or anything else you may need. 

Finding the message count of a queue

  • Open a command prompt and run the jboss-cli script from within the JBOSS_HOME bin directory:
    • %JBOSS_HOME%/bin/jboss-cli.bat -c 
/subsystem=messaging/hornetq-server=default/jms-queue=testQueue/:count-messages
  • If the outcome was a success the result should contain how many messages are in the queue. 

Listing the messages in a queue

  • Still connected to the JBoss command line interface run the following command:
/subsystem=messaging/hornetq-server=default/jms-queue=testQueue/:list-messages

Moving messages

  • You can move all messages from a one queue to another:
/subsystem=messaging/hornetq-server=default/jms-queue=testQueue/:move-messages(other-queue-name=destinationQueue)
  • You can move a message from one queue to another if you know the message id of the message you want to move. You should be able to get this from listing the message as described earlier:
/subsystem=messaging/hornetq-server=default/jms-queue=testQueue/:move-message(other-queue-name=destinationQueue,message-id=ID5e1b49b7-15a2-11e5-a905-89636a1272dc)

List prepared transactions

  • You can list prepared transaction on the HornetQ server by running the following command:
/subsystem=messaging/hornetq-server=default/:list-prepared-transactions

Commit prepared transactions

  • If you need to force commit a prepared transaction you can do so by providing the transaction-as-base-64 value found in the list-prepared-transaction command for the following command:
/subsystem=messaging/hornetq-server=default/:commit-prepared-transaction(transaction-as-base-64=AAAAAAAAAAAAAP__wADIWogIO3NWnRrMAADsLwAAAAIAAAAAAAAAAAAAAAAAAP__wADIWogIO3NWnRrMAADsFzEHAgIA)

Java utility applications

HornetQ has a number of Java utility applications that can be run in order to perform certain tasks, these classes can be found in the %JBOSS_HOME%\modules\system\layers\base\org\hornetq directory. 

ExportJournal

  • Use this class to export the journal data. You can use it as a main class or through its native method exportJournal(String, String, String, int, int, String), example as main method:
java -cp %JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-commons-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-core-client-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-jms-client-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-jms-server-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-journal-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-server-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\jboss\logging\main\jboss-logging-3.1.2.GA-redhat-1.jar \
org.hornetq.core.journal.impl.ExportJournal %JBOSS_HOME%\standalone\data\messagingjournal hornetq-data hq 10485760 %JBOSS_HOME%\tmp\journalExport.dmp

XmlDataExporter

  • Read the journal, page, and large-message data from a stopped instance of HornetQ and save it in an XML format to a file, example:
java -cp %JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-commons-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-core-client-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-jms-client-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-jms-server-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-journal-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-server-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\jboss\logging\main\jboss-logging-3.1.2.GA-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\jboss\netty\main\netty-3.2.6.Final.jar \
org.hornetq.core.persistence.impl.journal.XmlDataExporter %JBOSS_HOME%/standalone/data/messagingbindings %JBOSS_HOME%/standalone/data/messagingjournal %JBOSS_HOME%/standalone/data/messagingpaging $JBOSS_HOME/standalone/data/messaginglargemessages > journal-export.xml

XmlDataImporter

  • Read XML output generate by the org.hornetq.core.persistence.impl.journal.XmlDataExporter class, create a core session, and send the messages to a running instance of HornetQ, example:
java -cp %JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-commons-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-core-client-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-jms-client-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-jms-server-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-journal-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-server-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\jboss\logging\main\jboss-logging-3.1.2.GA-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\jboss\netty\main\netty-3.2.6.Final.jar \
org.hornetq.core.persistence.impl.journal.XmlDataImporter journal-export.xml localhost 5445

PrintData

  • PrintData writes a human-readable interpretation of the contents of a HornetQ Journal, example:
java -cp %JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-commons-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-core-client-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-jms-client-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-jms-server-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-journal-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-server-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\jboss\logging\main\jboss-logging-3.1.2.GA-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\jboss\netty\main\netty-3.2.6.Final.jar \
org.hornetq.core.persistence.impl.journal.PrintData standalone/data/messagingbindings/ standalone/data/messagingjournal/ > printData.log

PrintPages

  • PrintPages writes a human-readable interpretation of the contents of a HornetQ Journal and its pages, example:
java -cp %JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-commons-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-core-client-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-jms-client-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-jms-server-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-journal-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\hornetq\main\hornetq-server-2.3.12.Final-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\jboss\logging\main\jboss-logging-3.1.2.GA-redhat-1.jar;%JBOSS_HOME%\modules\system\layers\base\org\jboss\netty\main\netty-3.2.6.Final.jar \
org.hornetq.core.paging.PrintPages standalone/data/messagingpaging/ standalone/data/messagingjournal/ > printPages.log