Offline web application with Angular

Last month I wrote a blog about a Progressive Web Application in Vue.js and subsequently I investigated how one could do this all in Angular (version 5.0.1). I am new to Angular and have just started to learn it. I like Vue very much but for an existing work project already using Angular I hope to learn the framework. This doesn't mean I am going to throw Vue out the window, on the contrary I just signed up for the online Vue Master Class just starting out on vueschool.io. I think learning Angular on top of it will only improve my skills in Javascript and and increase my understanding of modern web frameworks.

Angular PWA Example

After reading the quick start documentation on the Angular website in order to get familiar with Angular I went about searching the web for information on how to build PWA application with Angular. I found the following article really useful and built the sample Angular project based on the information I found here:

A new Angular Service Worker — creating automatic progressive web apps. 

• Part 1: theory

• Part 2: practice

The example application they have is called PWAtter and you can find it on GitHub. The example I created and have on GitHub is a very basic Angular application with SW configuration and support based on the articles mentioned in the links above. 

A short note on running the application, to run it in dev you can run the "npm run start" command line. Running in Dev doesn't enable Service Worker support. To run it with the Service Worker support you need to run in production mode and with a http server, the command for the project is "npm run serve-prod-ngsw".

Storytellers - a Vue, NUXT, SSR, Vuetify, Firebase [Auth, Firestore, Storage, Functions] application

I am trying to develop an web application from the ground up in order for me to really learn and understand modern web development. I wrote a blog entry when I first started out and I have continued to work on the sample application.

There is very little you can do with the application but it covers a lot of ground already. I have managed to covers all the tiers I am trying to learn:

• Vue.js
• NUXT.js with SSR
• Vuetify.js
• Firebase
• Authentication
• Firestore database
• Storage
• Firebase functions

Hopefully, if I have time, I can add more functionality to it so that it looks and feels like a proper functional application.

What is the web application about? Well at the moment it allows a user to upload images to Firebase storage and displays thumbnails on the home screen. Sounds amazing. Ultimately I would like to 'expand' on that :-) and end up with a community driven application providing a platform for the creative and artistic to share and collaborate their stories and ideas with one another.

Yeah so arguably that idea is pointless and ... yeah it might be ... but it allows me to try many different things and covers many different technology stacks so I am going to learn a lot by doing this.

I don't expect anyone to be interested in "collaborating" with me in development but I want to keep this opensource and invite anyone out there who is keen and able to contribute to the development of this project. Feel free to fork the repository, raise issues and submit pull requests.

Offline web application with Vue.js

I have recently been learning Vue and in so doing a million other things, it seems, to do with modern web frameworks like Vue. Vue is described as:

The Progressive JavaScript Framework

So what is a Progressive Web App? Wikipedia explains it as follows:

Progressive Web App (PWA) is a term used to denote web applications that use the latest web technologies. Progressive Web Apps, also known as Installable Web Apps or Hybrid Web Apps, are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications. The application type attempts to combine features offered by most modern browsers with the benefits of mobile experience.

The following characteristics make up a PWA:

Progressive

Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.

Responsive

Fit any form factor: desktop, mobile, tablet, or forms yet to emerge.

Connectivity independent

Service workers allow work offline, or on low quality networks.

App-like

Feel like an app to the user with app-style interactions and navigation.

Fresh

Always up-to-date thanks to the service worker update process.

Safe

Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.

Discoverable

Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.

Re-engageable

Make re-engagement easy through features like push notifications.

Installable

Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.

Linkable

Easily shared via a URL and do not require complex installation.

For me I was quite keen to see how the connectivity independent characteristic could work so that regardless of whether or not a user is online they could still work away as if they were connected. I started reading up on service workers to get an initial understanding of the concepts.

I found the following links most helpful:

• Google's Developer's guide to server workers
• Background sync with service workers
• Sample Vue PWA with service workers by Charles Bochet

Over and above that there are these two vue-cli templates designed to give you a running application with all the PWA features configured and ready to use:

• vue-pwa-boilerplate
• vuetify-pwa-boilerplate

The Vuetify example is based off the vue-pwa-boilerplate just with Vuetify semantic material components.

I took these examples and created my own vuetify-pwa application. The goal was to have some web navigation between pages and to be able to complete some forms and submit them regardless of internet connectivity. Once online the goal is to auto sync the changes with the server. This background sync hasn't been implemented yet and hopefully I can get to update this later on when it is done.

Vue.js, NUXT.js, Vuetify.js, Firebase authentication

Please note I have a more recent blog entry regarding authentication with Firebase + Nuxt that not only uses the session to store the user ID but a cookie to store the access token. It also makes use of the Nuxt Axios module to make server posts on login and logoff. 

I previously wrote a blog detailing a few steps to get a sample Vue + Vuetify + Nuxt application running on Heroku cloud platform. In this blog I want to share a sample application I did that has all of the above but also Firebase authentication.

Framework Overview

In a nutshell this is what the example application covers:

Vue.js

The sample application is built using the Vue.js framework, a progressive framework for building user interfaces.

NUXT.js

It is also built on top of NUXT.js, a framework for creating Universal Vue.js Applications. I chose NUXT.js because I wanted to build a server-rendered Vue application. I didn't need to use NUXT, there is an in-depth guide I could have followed but NUXT is supposed to make building universal web application easier. That sounds good to me.

Vuetify

For the UI components and page layouts I make use of Vuetify.js, a semantic component framework for Vue.js. Why Vuetify and not many other options that are available, like what can be seen in this comparison blog post? A lot of these frameworks are new to me, Vuetify seemed like a popular choice with a stable backing and it supported server side rendering with NUXT.

Firebase Authentication 

The application integrates with Firebase in order to authenticate users.

Vue CLI Templates

Getting familiar with NUXT and Vuetify I went over the following Vue CLI templates:

• NUXT Starter Template
• Vuetify + NUXT Starter Template

They were both very useful and instrumental in getting an initial understanding into their framework. But things started to get a little less simple and a lot more fuzzy when I started to integrate Firebase authentication with my app. Of course there is a lot I need to learn (and still need to learn). GitHub issues for both these projects were quite helpful in searching for answers to questions I had:

• NUXT Issues
• Vuetify Issues

The problem

I needed a way to authenticate users through Firebase authentication and to handle state on the server as well as the client. Firebase web authentication is run on the client side. I wanted to be able to logout a user when the user logs out and also keep a user logged in when the user refreshes their browser. There seems to be a number of different approaches to this problem and I settled on the following:

1. Configure the application to run an express server so that I could handle server POSTS and  GETS if needs be (example sign in and sign out post) and store any information in the session in case I need to access it again from the server. The following link on the NUXT website helped me configure my custom server: https://nuxtjs.org/examples/auth-routes/. Oh and yeah it has an example of an auth use case except it didn't quite fit my scenario.
2. Configure a pages middleware function that gets called for every secure page, not for sign in and sign up pages. This function will be responsible to see if the user is authenticated or not by either checking the session (server) or analysing the firebaseApp variable to see if the current user exists or not. 

The above means I don't store the logged in user in any store like Vuex, Firebase seems to store the user in localStorage in a variable called "authuser". That way it can keep the user signed in.

Sample Code

The sample code for the project I did can be found here:

• https://github.com/rossma/storytellers/tree/nuxt-update

Once cloned you should be able to change into the ui folder and run the following commands to test it out:

• npm install
• npm run build
• npm run dev-custom-server

You could also just examine the code...maybe there is something useful there you will find. Like I said at the beginning this is all very new to me so most likely there are a lot of things wrong with the way I have done it. I hope not. But nevertheless I learned a lot.

Audit logging in JBoss EAP 6

A security domain in JBoss can be configured to write information to a log file or do some custom action like send an email notification all for audit purposes. You can configure the security domain via the admin console / jboss-cli / edit the standalone.xml file directly.

Open the admin console and navigate to Configuration -> Security -> Security Domains. Choose the View link from the list of domains you want to edit. Select the audit tab. For example if you want to configure the default other domain you will notice that there are no provider modules listed. Provider modules are used to provide this audit mechanism. By default JBoss uses org.jboss.security.audit.providers.LogAuditProvider. This isn't listed in the table here and is disabled by default.

Enable the LogAuditProvider for the application server 

A log appender needs to be configured, this can be done via the CLI or edit the standalone configuration file manually. 

CLI

/profile=full-ha/subsystem=logging/periodic-rotating-file-handler=AUDIT/:add(suffix=.yyyy-MM-dd,formatter=%d{HH:mm:ss,SSS} %-5p [%c] (%t) %s%E%n,level=TRACE,file={"relative-to" => "jboss.server.log.dir","path" => "audit.log"})
/profile=full-ha/subsystem=logging/logger=org.jboss.security.audit/:add(level=TRACE,category=org.jboss.security,handlers=["AUDIT"])

The above should generate the following configuration in your standalone.xml file:

<periodic-rotating-file-handler name="AUDIT" autoflush="true">
  <level name="TRACE"/>
  <formatter>
    <pattern-formatter pattern="%d{HH:mm:ss,SSS} %-5p [%c] (%t) %s%E%n"/>
  </formatter>
  <file relative-to="jboss.server.log.dir" path="audit.log"/>
  <suffix value=".yyyy-MM-dd"/>
  <append value="true"/>
</periodic-rotating-file-handler>
<logger category="org.jboss.security">
  <level name="TRACE"/>
  <handlers>
    <handler name="AUDIT"/>
  </handlers>
</logger>

Disable the LogAuditProvider for a single web application

The above log configuration applies to all applications deployed to the application server. To disable this logging for a particular application you can include a jboss-web.xml file in your WEB-INF directory that has the disable-audit element defined with a false value, example:

<?xml version="1.0" encoding="UTF-8"?>
<jboss-web>
  <security-domain>java:/jaas/other</security-domain>
  <disable-audit>false</disable-audit>
</jboss-web>

As mentioned above the auditing uses provider modules and the default is org.jboss.security.audit.providers.LogAuditProvider. You can use this one or implement your own. The LogAuditProvider can be found in the picketbox-4.1.1.Final-redhat-1.jar and extends abstract class: AbstractAuditProvider

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

Heroku manages app deployments with Git. You can create an Heroku App online or through the Command Line Interface with or without an existing Git repository.

Create an Heroku App without an existing Git repository

Follow these instructions to create your Heroku app.

Create an Heroku App with an existing Git repository

Follow these instructions to create your Heroku app from an existing Git repository.

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"
  }

But I made sure to run all the other commands mentioned in their instructions:

 $ heroku config:set NPM_CONFIG_PRODUCTION=false
 Setting NPM_CONFIG_PRODUCTION and restarting my-app-123... done, v3
 NPM_CONFIG_PRODUCTION: false

 $ heroku config:set HOST=0.0.0.0
 Setting HOST and restarting my-app-123... done, v4
 HOST: 0.0.0.0

 $ heroku config:set NODE_ENV=production
 Setting NODE_ENV and restarting my-app-123... done, v5
 NODE_ENV: production

Heroku Deployment 

To deploy your application (via Git) to Heroku you should run the following command:

• git push heroku master

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 apps expect the app directory structure at the root of the repository. If your app is inside a subdirectory in your repository, it won’t run when pushed to Heroku. Git allows you to push a subtree of your repository, example:

 git push heroku `git subtree split --prefix appsubdirectory mybranch`:master

I got the following error when doing this:

error: unable to push to unqualified destination: master The destination refspec neither matches an existing ref on the remote nor begins with refs/, and we are unable to guess a prefix based on the source ref.

In order for me to resolve this I changed the push command to the following (this only needed to be done once):

 git push heroku `git subtree split --prefix appsubdirectory mybranch`:refs/heads/master

Heroku Local

In order 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. 

Example would be to always specify the node version as outlined in this page

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.

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

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