Initialising a Lumen/Vue project

Challenge

I want to create a single-page application in Vue.js that talks to a Laravel Lumen PHP REST API.

This is because I want to use some legacy Laravel packages in the API, and I’m more comfortable with PHP on the server than JS: I’d rather learn Vue.js by itself right now, than take on Node JS/Express JS development at the same time.

I’ve been learning how to use Vue.js itself; and I know how to create Lumen PHP applications. But I haven’t yet set up a workflow that allows me to work on an overall application that, between the server and the browser, uses both, and has the following qualities:

  • Allows me to use MySQL/Redis as data store servers
  • Uses a system like Webpack or Browserify to bundle assets related to Vue.js, and allow ES2015 language features
  • Watches public web directories and automatically bundles assets in response to changes in those directories

Attempt 1 – Gameplan

  1. Use Laravel Homestead to set up a virtual machine.
  2. VM needs to host two subdomains from separate directories: http://www.example.dev and api.example.dev
  3. Enable HTTPS for both subdomains
  4. Install Lumen in api.example.dev, and create a test API endpoint that will return some JSON
  5. Create a test http://www.example.dev/index.html, and verify that it’s being served OK
  6. Install Vue.js + NPM infrastructure so I can develop a Vue SPA, with asset files bundled automatically when code changes… but without NPM spinning up a localhost server

Attempt 1 – How it went

  • First impressions are, it’s fairly straightforward
  • I updated my versions of VirtualBox and Vagrant
  • I installed a homestead box in my Users directory
  • Did some very basic configuration to the Homestead.yaml file, to configure Nginx
  • Nginx is happy to serve 2 applications, one for each subdomain
  • Nginx seems to offer a snakeoil-style SSL certificate, so although Chrome complains, I can serve content over SSL by default
  • It was easy – familiar because I’ve used Laravel and Slim PHP application frameworks – to set up an API endpoint that serves some test JSON

Attempt 1 – Webpack

I had some Vue.js tutorial projects that use webpack for bundling project assets into a build.js file, and – I think – to run a Node/Express webserver to serve up the resulting content. Webpack was configured to bundle project assets whenever they changed. In the past I’d run all this by typing

 npm run dev

…into a command prompt.

What I want to achieve, though, is to have webpack watch for changes to my code and compile a build.js for me… but I don’t want the Node/Express mini-server to serve the content for me.

I wasn’t sure whether I could get this going easily. Here’s what I did:

  • Copied one of my tutorial Vue apps (the whole folder structure) into the public webfolder of the relevant Homestead app (the directory from which Homestead will serve http://www.example.dev) – so VirtualBox/Vagrant/Homestead would serve the content. At this point, the Vue app does not work, because /src/build.js is not being compiled
  • In my local file system –  IE on my Mac, not the Vagrant VM – I installed webpack globally:
npm install -g webpack
webpack --watch
  • When I navigated to http://www.example.dev, or refreshed my browser window, the Vue.js application was working OK: webpack must have created a build.js file.
  • Changed some code in a Vue file – IE made a code change that would only be visible in the browser if webpack recompiled the build.js file
  • Refreshed my browser window… and the Vue.js project looked OK.

Webpack & Vue.js project

So now, I know that I can call webpack and tell it to bundle project assets when assets are changed, using the CLI command webpack –watch.

But the tutorial I’d been following used the command npm run dev. I wanted to know the relationship between the two commands.

The answer is in the application’s package.json file – the file which defines application options and dependencies for NPM. The file contains the lines

...
"scripts": {
 "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
 "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 },
...

I think, when I type npm run dev, it’s running the script defined in scripts.dev.

I tested this by (backing up package.json and) overwriting scripts.dev with

cross-env NODE_ENV=development webpack --watch

And now, I can call node.run dev at the command line, and my application is served, webpack watching the public web directory as expected.

Advertisements

Unlocking MySQL table locks

I’ve built a PHP web app that’s used quite heavily for some moderately intensive MySQL queries.

There’s an issue with it: every so often, I see PDOExceptions with the message:

SQLSTATE[40001]: Serialization failure: 1213 Deadlock found when trying to get lock; try restarting transaction

I haven’t managed yet to trace exactly what the problem is, or what’s causing it… but I was Googling how to make MySQL drop locks, and found this StackOverflow post that I thought was quite useful:

# Log into MySQL
mysql -u your_user -p

# Show tables that are being used
mysql> show open tables where in_use>0;

# Show what processes are running
mysql> show processlist;

# Kill a process that's (presumably) locking a table
mysql> kill put_process_id_here;

Getting a local Git repo linked to a remote (Bitbucket) repo

Create a Bitbucket repo

I created a private git repo on Bitbucket.

SSH authentication

I created a SSH private/public key pair on my Mac:

$ cd ~/.ssh
$ ssh-keygen
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/me/.ssh/id_rsa): test_rsa
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in test_rsa.
Your public key has been saved in test_rsa.pub.

I left the passphrase empty because I didn’t want Bitbucket to prompt me for it on every push.

I uploaded the public key to Bitbucket:

  • In Bitbucket I navigated to My Account > Settings > Security > SSH Keys
  • I clicked Add SSH Key.
  • On the Mac I ran cat ~/.ssh/test_rsa.pub | pbcopy
  • I pasted the result into the Bitbucket screen, and saved the key pair

Initialise local repo

$ mkdir /path/to/your/project
$ cd /path/to/your/project
$ git init
$ git remote add origin git@bitbucket.org:myusername/myreponame.git

Create some content

$ echo "Hello world" >> test.txt
$ git add --all
$ git commit -am 'Initial commit'
$ git push -u origin master

For me, this FAILED.

I don’t know if it’s something very specific to my configuration, but none of the quickly-accessible Atlassian KB pages or Stack Overflow pages helped.

UNTIL I looked in an existing local repo’s .git/config file:

... some config...
[remote "origin"]
    url = https://username@bitbucket.org/username/reponame.git
    fetch = +refs/heads/*:refs/remotes/origin/*
...more config...

When I overwrote my “broken” local repo’s config, so it used a HTTPS version of the remote repo’s URL, I could interact with the remote repo without having to give a password.

Securing Apache: disabling SSLv3

A client of mine is seeking PCI compliance and one of the aspects they were failing on was that an Apache web server was allowing access over SSLv3.

To disable it, here’s what I did (as root user):

me:/etc/apache2#cd /etc/apache2
me:/etc/apache2#grep -i -r "SSLEngine" *
mods-available/ssl.conf:    SSLProtocol all
me:/etc/apache2#nano mods-available/ssl.conf

[Edits ssl.conf]
[Finds line SSLProtocol all; changes it to...]

SSLProtocol all -SSLv2 -SSLv3

[Saves changes to ssl.conf]

me:/etc/apache2#service apache2 restart

Ubuntu 14.04 shell script to pull updates from a Bitbucket repo

  • You’ll need to create a public/private RSA key pair (see here for details)
  • The eval and ssh-add lines make sure SSH Agent is active
  • git reset –hard is maybe a little bit strong, but there you go
#!/bin/bash

eval `ssh-agent -s`
ssh-add /path/to/rsa-key-file-name

cd /path/to/repo-root

git fetch
git reset --hard origin/master

#echo "Finished."

Cloning a private Bitbucket repo on Ubuntu via CLI

So I need to clone a private git repository hosted with Bitbucket, on a new Ubuntu 14.04 VPS. Here’s how I got it working…

Get Bitbucket to know and trust the VPS

First, I needed to create a public/private SSH key pair:

  • cd ~/.ssh
  • ssh-keygen -t rsa -b 4096 -C “myemail@mydomain.com”
  • [Enter name of file, EG key-file-name]
  • Enter/confirm passphrase [leave empty for no passphrase…]

Next, I had to add my key to SSH Agent:

  • eval “$(ssh-agent -s)” [to make sure SSH Agent is active]
  • ssh-add /path/to/key-file-name

Next I had to make Bitbucket aware of the key pair:

  • Got public key into clipboard. If you have Linux GUI going, or you’re on a Mac, you can use a special command for this, but I just ran cat key-file-name.pub and copied from the Mac terminal window to my clipboard.
  • In bitbucket’s site, I created a new SSH Key, named it (key-file-name) and pasted the contents of the public key into it.
  • Tested the connection with ssh -T git@bitbucket.org [it worked!]

Clone the repo

  • In bitbucket site, select the repo
  • Click the Actions icon (… ellipsis just below trash can)
  • Click the Clone link
  • Copy the CLI command to clone the repo – something like git clone git@bitbucket.org:username/reponame.git
  • Paste it into VPS CLI and hit ENTER
  • It clones…