Stuff I'm Up To

Technical Ramblings

ESRI ArcGIS — February 21, 2019


Over the past few weeks I’ve entered into the world of spacial systems and mapping. We have a couple of members of staff who look after our GIS (Geographic Information Systems) that plot all kinds of spacial data onto maps for properties, water courses, streets, etc. The data they produce is used widely through many of our services, but now we’re starting to provide more interactive online mapping for the public.

ESRI ArcGIS Online

Continue reading
Opening another Window with electron-vue — October 9, 2018

Opening another Window with electron-vue

Having entered the world of Electron and mashing it together with Vue.js using electron-vue I needed to figure out how to open another window from Electron and still have vue active within it and better yet, still have the hot module reloading active in that new window whilst developing it.

It was whilst trawling the electron-vue github issue page that I came across a golden nugget of code that answered the very question for me.


First of all, you need to disable mode: 'history' in your vue-router, check in vue-router docs

Then do the following:

src/main/index.js example

ipc.on('showChart', function (e, data) {
  const modalPath = process.env.NODE_ENV === 'development'
    ? 'http://localhost:9080/#/showChart'
    : `file://${__dirname}/index.html#showChart`
  let win = new BrowserWindow({ width: 400, height: 320, webPreferences: {webSecurity: false} })
  win.on('close', function () { win = null })

In your router, use the exactly path to your url

src/renderer/router.js example

  path: '/showChart',
  name: 'showChart',
  component: require('your-router'),


When this isn’t this and becomes that — October 2, 2018

When this isn’t this and becomes that

I recently tried to assist a colleague with an issue in JavaScript involving an undefined variable within a Vue.js app.

Now I have encountered this issue several times and never really gotten to the crux of the matter other than I know it’s because the context of this changes, depending on where you are in your code.

It was during this tongue twisting exercise that he found a useful document that gives an outline more elegantly than I could phrase.

Since arrow functions provide a lexical this value, the this inside our function() refers to the window instead of our Vue object which breaks our current implementation! When attempting to get this.item, we will actually be looking at window.item which is currently undefined.

electron-vue —
Vuetable-2 — July 26, 2018


Previously I’ve used to build my tables on the Laravel blade templates for user interface. Now I’ve been migrating over to Vue.js I thought I’d look at another option – more Vue.js centric.

This is where vuetable-2 (not to be confused with other vue components of a similar name!) came in. I tried a lot of other vue tables and most of them had a dependency for jQuery. I really wanted one that didn’t use jQuery – I know Bootstrap has it as a dependency, but if I ever decide to remodel the UX using something like Material Design, I’d have no need to include jQuery.

As a component I needed to do a lot of work to configure it to work with my setup. But only really because I wanted it to work with Bootstrap 4 and fontawesome. So I had to build vue component templates that presented me with the correct structure and classes for the pagination and search.

The examples in the Gists relate to my admin interface to manage a Laravel user model of users and roles.

(see gists below)

Continue reading

Laravel and Vue.js Authentication — July 25, 2018
Laravel Vue.js and API Routes — July 23, 2018

Laravel Vue.js and API Routes

I ran into a problem where I’ve started to deploy Vue components using the Vue Router from within Laravel. As soon as I enabled the Vue route for /{any} I lost access to the api routes.


Route::get('/{any}', function () {
  return view('home');
})->name('home')->where('any', '.*');



const routes = [
    path: '/',
    name: 'home',
    component: home
  }, {
  }, {
    path: '*',
    name: 'notFound',
    component: notFound

I took a look at the Laravel RouteServiceProvider.php and noticed that the order of the web and api providers put the web first, so I swapped them around and now my api’s are back in business.

* Define the routes for the application.
* @return void
public function map()
  $this->mapApiRoutes(); // Needs to be first





vue-cli 3 and hmr — July 18, 2018

vue-cli 3 and hmr

What a nightmare I’ve had. Trying to figure out how to run a dev server with HMR (Hot Module Reload) on a virtual host that has two interfaces – one NAT and one Host Only adapter!

Why the two interfaces? Well I have to NAT one out from the guest OS so traffic looks like it comes from my business PC that uses network authentication. But NAT means I have no access back to the dev server as it uses an ip of (typical virtual box behaviour).

So to gain access to the dev server from my host I then use another NIC in the virtual guest that uses the “Host Only Adapter”. So this ends up using a static IP address of – again typical virtual box behaviour.

So I can access the virtual guest as to connect to the webpack dev server, but then I see errors in the client browser console:

+ [HMR] Waiting for update signal from WDS
+ [WDS] Disconnected

When I expanded the [WDS] Disconnected message I could see the clue being:


It’s obviously telling my client to use the wrong network interface for the websockets/sockjs connection used by HMR.

How to fix it was a mystery. I had to trawl until I found the @vue\cli-service\lib\serve.js file. In here it starts the sockjs with options like this:

const publicOpt = projectDevServerOptions.public
const sockjsUrl = publicOpt ? `//${publicOpt}/sockjs-node` : url.format({
  hostname: urls.lanUrlForConfig || 'localhost',
  pathname: '/sockjs-node'

This meant I could look to the vue-config.js​ file in the root of my project ad set the ‘public’ variable accordingly. I also set the proxy option to handle the fact I’m not developing on the same server.

// vue.config.js
module.exports = {
  devServer: {
    useLocalIp: false,
    proxy: 'http://localhost:8080',
    public: '',

Then I started the dev server using yarn, I could also use npm I guess.

$ yarn serve
DONE Compiled successfully in 1002ms 21:39:53

  App running at: 
  - Local: http://localhost:8080/ 
  - Network:

Now when I edit code and webpack recompiles, the HMR works and the browser updates!


Application Construction — April 4, 2018

Application Construction


For rapid application development there’s a lot of pre-written code out there that is mature and highly capable. There’s no need to build from the ground up when you can use a framework or scaffolding to build your application.

Laravel and Composer

My first step is to use Laravel. It’s installed using composer – which is a dependency manager for PHP. This means if a PHP component you install needs and relies upon other components, they’ll get installed too.

Composer installs all the PHP dependencies under ./vendor path of your project. The files in this path do not need to be included in your distribution. They can be installed and updated automatically using composer.

Composer keeps track of what you install into your project in the file composer.json. So whenever you run $ composer update it will read this file and pull down all the dependencies and install them into ./vendor.

Node.js and NPM

Whilst I may not be developing a Node application I can certainly make use of Node for the development process. It offers some very beneficial development features. It runs webpack to monitor and compile the projects assets and browsersync to refresh my browser when an asset is updated.

NPM is the package management tool that downloads and installs the Node packages required. In the same way as composer installs dependencies for PHP, NPM does this for Node/JavaScript.

NPM uses the file package.json to monitor/manage the dependencies you install, which get installed into ./node_modules. Again this does not need to be included in your distribution as the content you require gets compiled into your JavaScript assets. So you may not even require Node installing on your production server environment.


As part of the Laravel install you’ll get a flavour of Webpack, or mix as Laravel terms their adaption.

Webpack carries out the monitoring and compilation of assets. It takes your JavaScript and CSS/SASS files and uglifies/compresses them into smaller code only versions of your scripts. It can take a JavaScript file from 2MB of code down to less than 200kb. Simplistically it does this by stripping all of the “English” from it and shrinking your long variable and function names to what are often single character variable and function names. Removing spaces, tabs and carriage returns etc.


var my_variable_name = 1;


var a=1;

Once the code is delivered to the browser in a production environment there is no need for the code to be human readable anymore.

The primary input for webpack comes from the assets ./resources/assets/js/app.js and bootstrap.js (not to be confused with the bootstrap framework). These two files are the core of your JavaScript application.

Webpack compiles your assets into ./public/css/app.css and ./public/js/app.js. So you only have a few includes required in your projects HTML to use your assets. You can split them down further so 3rd party or vendor code is separated from your own code.


Laravel ships with Vue.js these days. This is very new to me and strangely different. It’s a JavaScript framework that is a totally different environment than my experience with jQuery. The main features that make it so different for me are the ability to bind data to components. This means a big change in the way you previously needed to monitor and trigger events based on changes in data. Vue.js does this for you.

Vue components live with your JavaScript assets under ./resources/assets/js/components. Once required/imported in your app.js file the .vue files get compiled into your application.

Bootstrap and Bootstrap-vue

Bootstrap is a HTML presentation framework. it provides the visual construction of the web page that the users of your application see. It’s the styling/CSS of the application. It’s a distinctive style, but very powerful in that designing for mobile, tablet through to desktop presentation is a built in function of the framework.

Bootstrap-vue is a Vue.js componentised implementation of Bootstrap. The need for writing HTML code in the manner of Bootstrap is taken over by writing vue components that build the Bootstrap HTML. So a Bootstrap button can become a vue component with data binding with actions and references like any other vue component. This brings program-ability to the visual presentation capabilities of Bootstrap.

Vuetify and Material Design

As an alternate presentation framework to Bootstrap/Bootstrap-vue on one project I’ve used Vuetify. Vuetify again is a very distinctive style. It uses the Google Material Design styles to present your application.

Application Delivery

After writing and testing the application locally I need to deploy it to a web server.

As part of my development process I use the Git version control system. This allows me to commit changes of my code in a controlled manner and enables me to rollback to previous versions, compare changes I’ve made and easily deploy the code to other systems.

For this I installed a Gitlab server so we have our own internal Git version control server. Using Github is only for publicly accessible code unless you take out a commercial package. Having our own Gitlab server provides the same functionality, but enables me to keep private projects internally.

To deploy the code to a server is as simple as compiling my assets for production and cloning the project to the server or pulling the changes.

Compile my production assets and upload/push them to the Gitlab server:

$ npm run prod
$ git add .
$ git commit -m "Production deployment"
$ git push

Then from the server clone the code and install/update the PHP dependencies:

$ git clone git@gitlab.domain.local/projectpath/project.git
$ composer update

or, to update the server:

$ git pull
$ composer update

Then it’s good to go.

So in all it seems a lot of components and when I started down this path I thought it all very confusing and more than a little daunting. But it’s like Lego. They all snap together quite tidily and the end result is a comprehensive application development and delivery platform.

Vue.js, Laravel and JSON Web Tokens — March 28, 2018

Vue.js, Laravel and JSON Web Tokens

When you have a Vue.js powered app authentication using traditional logon pages isn’t going to work. This is because primarily the apps interaction with the server is using Ajax calls with axios. So now we need to use JSON Web Tokens (JWT) to handle the authentication and store a client side session authentication token.

This article is very useful for this:

Continue reading

Useful Vue.js components — March 22, 2018
Vue.js – Past the First Week — March 21, 2018

Vue.js – Past the First Week

I started recoding a project that I’d only just built using Vue.js as an exercise in learning Vue. The project had only just been deployed using Laravel 5.5, Bootstrap 3 and jQuery. So I rewrote it and used Laravel 5.5, Bootstrap 4 and Vue.js.

The initial project delivered a nav menu driven series of pages that presented tabular results with a search/filter capability, with some Ajax/XHR calls to update datatables.

I’d built several blade templates to deliver the content and used some excellent Open Source code for building PHP forms for the filters and result details – Kris’ laravel-form-builder. I used to present columns of data and it all came together quite well.

But then I switched to Vue.js and replaced the form builder and datatables with bootstrap-vue.

Continue reading