Stuff I'm Up To

Technical Ramblings

Linting — August 6, 2018

Linting

No, this isn’t about taking the fluff from your belly button – but you’re close.

https://eslint.org/

Linting your written code is a method of ensuring that it meets consistent syntax and style guidelines. Eg. ensuring you indent function blocks by 4 spaces and not tabs, placing curly braces {} on new lines, having spaces following function names and parameters etc.

JavaScript, being a dynamic and loosely-typed language, is especially prone to developer error. Without the benefit of a compilation process, JavaScript code is typically executed in order to find syntax or other errors. Linting tools like ESLint allow developers to discover problems with their JavaScript code without executing it.

ESLint is a great way of ensuring my (ECMA)JavaScript coding style is consistent and correct. Using it within atom.io is a great way to keep my work tidy. Just add the ESLint package and we’re set to track and tidy my .js files.

But I want the same rules for my .vue files. I found this really handy: https://alligator.io/vuejs/vue-eslint-plugin/

Add the atom package linter-eslint then go to its settings button.

Find the option “List of scopes to run ESLint on…” and add onto it:

text.html.vue

So in my case it becomes:

source.js, source.jsx, source.js.jsx, source.babel, source.js-semantic, text.html.vue

 

Advertisements
Laravel 5.5 and Hot Module Reload — July 20, 2018

Laravel 5.5 and Hot Module Reload

Revisiting a previous post  about vue-cli 3 and hmr I tried to get HMR going in a similar fashion through Laravel-mix.

First mistake to make is that laravel-mix does not need BrowserSync for HMR. So don’t install it or configure it in the webpack.mix.js file.

HMR on Laravel 5.5 is loaded by running the package.json “hot” script:

$ npm run hot

It compiles the assets and sits there doing apparently nothing. When actually it’s listening on localhost:8080 for HMR/WDS connections. Whilst in this state if you open another session and serve your project using artisan, HMR just works…

$ php artisan serve

… if you are developing on the same “localhost” as the HMR and artisan server are running on.

But what if you’re not?

I tend to fire up a virtual host with Laravel installed so can’t access it as “localhost” I must use one of it’s public interfaces such as 192.168.56.2.

To make laravel-mix HMR run on one of your public interfaces you’ll need to edit you webpack.mix.js file and add it the following as per your serving host:

mix.options({
  hmrOptions: {
    host: '192.168.56.2',
    port: 8080
  }
});

In your blade template ensure you refer to your assets using the form src="{{ mix('js/app.js') }}" as using it like this handles adjusting the host in the blade based on if you are running the hot script or not.

You MUST run two sessions to use HMR. One to run the hot compiler and one to serve the php environment with artisan. I’ve had frustrating times trying to use & for task spawning.

In session one:

$ npm run hot

In session two:

$ php artisan serve --host 192.168.56.2

Visit your app at: http://192.168.56.2:8000 and you’ll get your artisan served php project.

If you inspect the page in your browser you’ll see the mix src becomes //192.168.56.2:8080/app.js because of the config.js change – NOT the artisan serve.

 

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 10.0.2.15 (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 192.168.56.2 – again typical virtual box behaviour.

So I can access the virtual guest as http://192.168.56.2:8080 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:

./node_modules/webpack-dev-server/client/index.js?http://10.0.2.15:8080/sockjs-node

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({
  protocol,
  port,
  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: '192.168.56.2:8080',
  }
}

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: http://10.0.2.15:8080/

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

 

Building a Debian Development Server — July 13, 2018

Building a Debian Development Server

When I setup a development system there are a few steps I follow to get everything working together.

The aim is to get everything installed to provide php and composer, node, nginx, mysql and Laravel as a base to build on.

Install Debian

I take the latest amd64 version using a network installable iso. This way if I use an older 9.1, 9.2, 9.3 version iso, being a netinst version I’ll end up with the latest in that series as it downloads from the net.

Mostly making a 50GB disk is more than enough, as it’s thin provisioned on a virtual, space isn’t really a concern. When it comes to partitioning I’ve learned to take the easy option and create one partition to mount all filesystems into it.

Capture1

As it’s a development platform I never install a desktop environment. I never need to use any GUI programs on the server. The only options I choose to install are the standard system utilities and the ssh server.

Capture2

Out of personal preference, once up and running I install sudo, zsh, curl and git.

# apt-get install sudo zsh curl git

Then I add my non-root user to the sudo group so I can stop using root and use my regular user account to ssh onto the dev server..

# usermod -aG sudo [user]

Setup OhMyZsh

I like using zsh and the OhMyZsh which is why I installed curl and git. So logon as your non-root user.

$ sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Then I edit the ~/.zshrc file and change the theme to “bureau”.

Network Config

If I’m building a Virtual Box guest that runs on my local PC I’ll setup two interfaces. If it’s a virtual on VMWare I’ll just use the one production interface.

On a local Virtual Box I use one interface as NAT, so it gets a DHCP address like 10.0.2.15 which all outgoing traffic is routed by default. Makes life easier on a corporate network where network authentication is required. Using NAT like this means I don’t need to authenticate my guest as it NAT via my physical hosts authenticated interface.

I then setup second interface so I can connect to what is being served from the guest. This is a “host only” interface and means only my local system can connect to it, but because of the NAT the guest will still have access to the corporate network resources/servers.

This means I end up with two devices usually named enp0s3 (NAT) and enp0s8 (Host Only) on Debian.

Using a Static IP (optional)

I choose to make my system with a static IP. Using the Virtual Box DHCP server on a “host only” interface gives out a 192.168.56.101 address to the first guest, 102 to the second and so on. But you can end up with inconsistent IP’s for your hosts. So making them static is a better option IMO.

Edit /etc/network/interfaces and set you host only adapter to static:

# This file describes the network interfaces available on your system
# and how to activate them. For more information, see interfaces(5).

source /etc/network/interfaces.d/*

# The loopback network interface
auto lo

iface lo inet loopback

# The primary network interface
allow-hotplug enp0s3
iface enp0s3 inet dhcp

allow-hotplug enp0s8
iface enp0s8 inet static
  address 192.168.56.2
  netmask 255.255.255.0

This way My dev system always gets the static IP I chose for it.

$ ip a
1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1
  link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
  inet 127.0.0.1/8 scope host lo
    valid_lft forever preferred_lft forever
  inet6 ::1/128 scope host 
    valid_lft forever preferred_lft forever
2: enp0s3: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UP group default qlen 1000
  link/ether 08:00:27:61:a6:a8 brd ff:ff:ff:ff:ff:ff
  inet 10.0.2.15/24 brd 10.0.2.255 scope global enp0s3
    valid_lft forever preferred_lft forever
  inet6 fe80::a00:27ff:fe61:a6a8/64 scope link 
    valid_lft forever preferred_lft forever
3: enp0s8: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UP group default qlen 1000
  link/ether 08:00:27:2b:04:26 brd ff:ff:ff:ff:ff:ff
  inet 192.168.56.2/24 brd 192.168.56.255 scope global enp0s8
    valid_lft forever preferred_lft forever
  inet6 fe80::a00:27ff:fe2b:426/64 scope link 
    valid_lft forever preferred_lft forever

Install PHP

Because we don’t want Apache2 installed you need to install php-fpm which won’t force an install of Apache.

$ sudo apt-get install php-fpm

It will include a load of other php components you need, but no Apache, so you can then choose to move on to Nginx or some other php service.

Add the Laravel php requirements

$ sudo apt-get install php-mbstring php-zip php-xml libpng-dev make gcc g++

The additional module libpng-dev is required for Laravel to build using NodeJS npm. Without libpng-dev, make, gcc and g++, under your Laravel project folder the call to $ npm i fails with errors like:

> pngquant-bin@4.0.0 postinstall /home/user/myproject/node_modules/pngquant-bin
> node lib/install.js
⚠ The `/home/user/myproject/node_modules/pngquant-bin/vendor/pngquant` binary doesn't seem to work correctly
⚠ pngquant pre-build test failed
ℹ compiling from source
✔ pngquant pre-build test passed successfully
✖ Error: pngquant failed to build, make sure that libpng-dev is installed
at Promise.all.then.arr (/home/user/myproject/node_modules/pngquant-bin/node_modules/bin-build/node_modules/execa/index.js:231:11)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)

Install MySQL

As you’ll need a database you’ll want to install MySQL. These days MySQL is installed from the MySQL site by downloading a .deb file which add the Oracle repositories. The version of MySQL in the Debian repositories is MariaDB, a fork of MySQL.

If you go for the Oracle version  you’ll probably need to ensure you use legacy authentication for now.

Include the php drivers as we install the server:

$ sudo apt-get install mysql-server php-mysql

To manage MariaDB using mysql you need to use sudo:

$ sudo mysql -u root
...
MariaDB [(none)]>

Install Composer

Go to your home folder and use the command line install from here: https://getcomposer.org/download/

You’ll end up with a file composer.phar. This is ok if you’re the only one going to use it but I like to put it in /usr/bin as just composer so it is available for everyone.

$ sudo cp ~/composer.phar /usr/bin/composer
$ sudo chmod 755 /usr/bin/composer

Install NodeJS

Install it using a package manager following the steps for Debian

https://nodejs.org/en/download/package-manager/

$ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
$ sudo apt-get install -y nodejs

Then the first thing I do is update npm.

$ sudo npm i npm -g

Install Samba

Because not all development takes place on a Linux host this will allow us access to shares for Windows clients.

$ sudo install samba

Edit /etc/samba/smb.conf and make some simple changes.

workgroup=[NETBIOS DOMAIN NAME]

Then find [homes] and in that section change:

read only = no
create mask = 640
directory mask = 750

Create a password entry for your non-root user:

$ sudo smbpasswd -a [user]

Then restart Samba

$ sudo systemctl restart smbd

Then when you browse to the server from windows you should see and have access to your home folder eg. \\192.168.56.2\user

Installing Laravel

I prefer to install Laravel as a project using the Create Project method:

$ composer create-project --prefer-dist laravel/laravel [myproject]

This downloads all of the PHP composer prerequisites and delivers the project.

Once the project is created you can go into the folder [myproject] and check you can compile the assets using Node.

$ cd myproject
$ npm i

This will install all of the NodeJS prerequisites used for building/compiling your assets using the Laravel asset management tools – currently Laravel Mix (Based on Webpack). So with the Node modules installed you should be able to run prod and dev builds:

$ npm run dev
$ npm run prod

These should complete successfully.

You can then run Laravel’s built in development server to serve your project:

$ php artisan serve

But in reality this will fire up a pretty useless server listening on the IP address 127.0.0.1 on port 8000. So it’s only accessible from the development server.

As we’re going to need to access it from our client development machine we need to serve on the actual IP of the server. The easiest way of doing this is to serve it on every IPv4 interface on the server (you probably only have one, so it shouldn’t matter). To do this use:

$ php artisan serve --host=0.0.0.0

and if you want to specify the port you can use:

$ php artisan serve --host=0.0.0.0 --port=8001

Now you can access it from any client pointing your browser at http://192.168.56.2:8001 and begin exploring your Laravel project.

More Laravel

Of course serving a version of your project like this isn’t the only way to go. You should continue into dynamically building your assets using npm run watch and maybe even using tools like browserify to make changes happen at the browser end so you’re not building and refreshing all the time.

I also like to move away from a development web server and setup Nginx to handle serving my Laravel Project.

Further Reading

https://warlord0blog.wordpress.com/2017/03/01/ssh-logon-with-private-key/

https://warlord0blog.wordpress.com/2018/05/16/debian-stretch-ntp-time-sync/

https://warlord0blog.wordpress.com/2017/12/12/php7-0-microsoft-sql-driver-debian-stretch/

https://warlord0blog.wordpress.com/2017/03/01/installing-updating-webmin/

 

 

Project scoRPIon – Wake-on-WiFi — July 8, 2018

Project scoRPIon – Wake-on-WiFi

A friend setup his home systems to turn on his PC using Amazon Alexa and tasker to trigger a Raspberry Pi to operate a relay and effectively activate the power button.

What a wonderful idea!

I have a host of Raspberry Pi’s, but instead of Alexa I have chosen the Google Home (Assistant) for my voice control.

My PC is located upstairs from my router and connects using 802.11ac WiFi. Being WiFi that rules out using Wake-on-LAN, which I used to do. So using a RPI to trigger a relay is genius.

Continue reading

Node.js v8 on Raspberry Pi Zero — June 27, 2018

Node.js v8 on Raspberry Pi Zero

With Raspbian on my Zero I only get Node v4 in the repository. So How do I get a newer version of Node.js?

If I follow the standard Node instruction for installing from a repository I get:

$ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -

## Installing the NodeSource Node.js 8.x LTS Carbon repo...

## You appear to be running on ARMv6 hardware. Unfortunately this is not currently supported by the NodeSource Linux distributions. Please use the 'linux-armv6l' binary tarballs available directly from nodejs.org for Node.js 4 and later.

So it looks like I must download the tar.xz file.

Continue reading

NPM Behind a Proxy — April 13, 2018

NPM Behind a Proxy

Whilst trying to deploy a Node.js script to one of our windows servers I realised that NPM wasn’t downloading the necessary components because it wasn’t even trying to use the corporate proxy server.

It’s a Windows server so I checked the proxy settings

c:> netsh winhttp show proxy

Current WinHTTP proxy settings:

    Proxy Server(s) : http://192.168.0.117:8080
    Bypass List : <local>

That seemed to be telling the OS to use the corporate proxy. But the NPM progress bar just remained frozen and no modules were downloaded.

NPM has it’s own proxy settings in your user profile .npmrc file. You can edit the file and add them in yourself:

proxy=http://192.168.0.117:8080/
https-proxy=http://192.168.0.117:8080

or at the command prompt:

c:> npm config set proxy http://<username>:<password>@<proxy-server-url>:<port>
c:> npm config set https-proxy http://<username>:<password>@<proxy-server-url>:<port>
Google Home and Kodi — November 29, 2017

Google Home and Kodi

I thought I’d take the opportunity to add a Google Home to my gadget collection. After all it’s on a £50 off same this week, so comes in at £79 delivered.

What I really want from it above all is to control my Kodi setup. Being able to voice control what movie or TV show to play would make the wife’s life a lot easier – and when she’s happy, I’m happy.

This is where I came across the GoogleHomeKodi project on GitHub and referenced on the Kodi forum here.

Continue reading

Node.js & Databases — December 26, 2016
Node.js, Zip & RAR files — December 7, 2016

Node.js, Zip & RAR files

What an excursion this turned out to be. I figured using 7-zip would be the panacea for compressed files. How wrong could I be?

Turns out that the node-7z module is restricted to only being able to use the 7-zip v9 series. Any of the newer v15 and above don’t work. This is simply because node-7z uses the stdout from the 7z processes to get the list of extracted files. The newer 7z doesn’t report the extracting progress in the same way.

That’s not the only problem. If I want truly cross platform I have to use programs that are available on those platforms. So on Linux I have to rely on p7zip or p7zip-full to handle my archives. These are only compatible with 7-zip v9, so that should be fine right?

Well, no, that’s not where the problems happen. 7-zip v9 doesn’t support the newer RAR formats. So many of the RAR files I’m trying to extract don’t get extracted, because 7-zip can’t read them.

This leaves me with having to use the unrar program by calling it from the shell in the same way as 7z.

Continue reading

CBR-Manager — December 5, 2016
Understanding the Node.js Installation — December 3, 2016

Understanding the Node.js Installation

I’m still a little new to this Node.js stuff and it took me a which for how it is installed to come together in my head. After carrying out the install I was confused with reading the install routines needed for various modules I wanted to make use of.

I’d come across:

$ npm install --global
$ npm install --save-dev
$ npm install --save

And not really understood the difference.

Continue reading