Wednesday, November 22, 2017

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. 


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

Thursday, November 2, 2017

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:


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.

Tuesday, October 24, 2017

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:


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:


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.

Monday, October 23, 2017

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

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:
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:

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:
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.

Friday, October 20, 2017

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

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.