abcjs version 4.1.0 released!

A new version of abcjs is ready!

This has a lot of bug fixes, and a lot of small improvements to the audio control to make the overall experience better.

As an experiment, I’ve been working on a viewer for all the charts in my Trad Jazz band, and in the process I’ve uncovered some rough edges. This is a first pass on making the experience smoother and the next version of abcjs will have even more.

If you have any suggestions for further improvements, let me know.

To install this on a WordPress site, search the plugins for “ABC Notation”.

Deploying Laravel

There is surprisingly little information about deploying a Laravel app. I’ve got an EC2 and wanted to deploy a couple of experiments and had no idea what needs to happen. So, this is a quick overview that I wish I had read on the first day.

The Overview

All of the source files need to be put on the server as well as the compiled javascript and css.

When composer.json changes, then composer needs to run on the server. It does not need to run for every deploy, but that doesn’t hurt anything.

The javascript does NOT need to be processed on the server. It is processed on the development machine and just the compiled assets are copied to the server.

In addition, there are some folders that need to be expressly marked writable by the server.

One Time Server Task

Composer must be installed, and it can be installed on the server like this:

cd ~
curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer

The Initial Preparation

Laravel is built with PHP, so the basic setup is the same as WordPress. So start with the same steps as deploying WordPress:

1. Point the DNS records to your server.
2. Add a my-project.conf file to the nginx/apache config that is similar to the WordPress configuration.
3. The one difference to the conf file is to add “public” to the path. Here is the example for nginx:

root $ROOT/my-project/public;

4. Don’t forget to restart apache or nginx.

The next few steps require that you have your project stored in git and that you have ssh access to your server.

1. Make a script file in the root folder of your project called deploy_constants.sh. DO NOT CHECK THIS FILE INTO GIT. It will contain your secrets. It should look like this:

#!/usr/bin/env bash

#The location that all of the deployments are on this server.
BASE_DIR=/var/www/html
# The folder that will contain this deployment (often the domain name)
DIR_NAME=my-project.com
# The SSH line (That is, "ssh $SSH" should work.)
SSH=me@myserver
# On the server, "git clone $REPO" needs to work.
REPO=git@github.com:account/repo.git

ROOT=$BASE_DIR/$DIR_NAME

2. Then make another script called deploy-to-production-setup.sh that contains:

#!/usr/bin/env bash
. $(dirname "$0")/deploy_constants.sh
ssh $SSH "cd $BASE_DIR && git clone $REPO $DIR_NAME"
ssh $SSH "cd $ROOT/public && mkdir js"
ssh $SSH "cd $ROOT/public && mkdir css"
ssh $SSH "cd $ROOT/public && mkdir fonts"
scp .env $SSH:$ROOT/.env
ssh $SSH "cd $ROOT && chmod -R 777 ./storage"
ssh $SSH "cd $ROOT && chmod -R 777 ./bootstrap/cache"

3. Run this script. That should leave a new folder on the server with all of the source files.

4. On the server, edit the file .env to be correct for the server. At least change APP_ENV to “production”, and APP_URL to the actual URL. There are likely other app-specific things to change.

5. Create the following deployment script, and call it deploy-to-production.sh:

#!/usr/bin/env bash
. $(dirname "$0")/deploy_constants.sh
npm run production
ssh $SSH "cd $ROOT && git pull"
scp -r public/js/* $SSH:$ROOT/public/js
scp -r public/css/* $SSH:$ROOT/public/css
scp -r public/fonts/* $SSH:$ROOT/public/fonts
ssh $SSH "cd $ROOT && composer install --no-dev"

Each Deployment Iteration

Each time you want to push the latest code to production, check your code in, compile it, and run the deploy-to-production.sh script. This compiles the assets, gets the latest code from github, and runs composer just in case something changed.

I put the following two scripts in package.json for convenience and documentation:

"deploy-production": "./deploy-to-production.sh",
"deploy-production-setup": "./deploy-to-production-setup.sh"

Then I can deploy with:

npm run deploy-production

Note that deploy-to-production.sh and deploy-to-production-setup.sh are completely generic, so the same files can be used for all projects. It is just the values in deploy_constants.sh that change.

abcjs 3.2.0 released!

There’s a new version of abcjs. It has some bug fixes in general, support for the overlay feature of ABC, and improvements to the npm packaging.

Behind the scenes, I’m improving my testing scaffold and experimenting at the same time. For years, I’ve had a suite of over 500 ABC strings that test various parts of my code and I’ve run them as part of a Rails program. I’m not doing any Rails anymore, and I decided to rewrite the program in Laravel, with a Vue front end. This is also an experiment to see if I should start recommending that environment for projects that are basically JS apps, but require an API.

So far, so good. I like that it is PHP because that means that it is really easy to deploy. I don’t like working in PHP much, but version 7 has really improved.

Setting up a new Vue.js project with Vuetify, Vuex, etc.

My latest project uses Vue.js as a framework, it has a complicated data model so I’m using Vuex, and it needs to be styled using Material Design.

This post details how I created the project.

I am a believer in vue-cli as a starting point to create any Vue project. It saves a lot of configuration time and in a few minutes I can have a working, deployable blank app. There are a number of templates that take care of different types of apps. I’ve used a few of them. I found a vue.js library that implements material design called Vuetify. It has a template that I’ll be using for this example.

One time setup


# to get vue-cli installed:
$ npm i -g vue-cli

For each new project


# Type the following and answer each of the questions below.
$ vue init vuetifyjs/webpack-advanced myproject

? Project name myproject
? Project description My Awesome Project
? Author J. Programmer <abc@example.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset none
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

vue-cli · Generated "myproject".

Store this in source control now!

Npm Packages

Now, open the package.json file and move all the items from dependencies to devDependencies, then install the following (you may not need all of these libraries, but most of the apps I work on eventually need them):


$ cd myproject
$ npm install
# for ajax calls
$ npm install --save-dev axios
# for date/time manipulation and formatting
$ npm install --save-dev moment
# for the model layer
$ npm install --save-dev vuex
# for Font Awesome
$ npm install --save-dev vue-awesome

Basic configuration

In /config/index.js, set autoOpenBrowser: false. This will keep a new browser session from automatically starting every time you start the dev server. I keep my app open in a browser tab the entire time it is under development, so this would just create duplicates.

Remove .editorconfig, so that it doesn’t cause errors when it doesn’t like your formatting.

In /build/webpack.dev.conf.js, change devtool: '#inline-source-map'. I was having trouble seeing the correct source code in Chrome without this. I haven’t tried to figure out why.

Favicon

Go to this site: https://realfavicongenerator.net/ and generate the favicon files. This will result in around a dozen files being generated. Put those files in static/images.

In index.html, add the code recommended by the favicon generator’s output.

Run


$ npm run dev

Navigate to localhost:8080 to see your app.

Responsive abcjs

I have been experimenting with having abcjs be responsive. Here’s my first attempt: the sheet music will change size when the area for it changes:

Try changing the browser width and see how the image reacts.

Redesigned Contracorners

I redesigned the https://contracorners.com page! The old one was about seven years old and was not very mobile friendly. I’ve been meaning to do this for a while, but haven’t had the free time in my schedule until now. I needed something to practice my new Vue.js skilled on, too.

This is now a completely static page that does a couple of ajax calls to get information from third party feeds. The old site also allowed updating the schedule, but I’m splitting that into a separate input system.

It’s also the first site I’ve designed that uses the “card” analogy. I’ve always liked the look of it, and I implemented someone else’s card design a couple of years ago and found it easy to maintain and make responsive.

Laravel/Vue.js

I’ve been exploring Laravel and Vue.js lately, and I like them so far.

I’ve created a few static sites with Vue.js and it is so easy to get productive. They are either self-contained or they get their data with an ajax call to a third-party server. It’s also a snap to deploy and there is not much strain on the server.

I’ve also done a Laravel app that is entirely Vue.js on the front end, with some /api routes that are called with ajax from the Vue.js side. It’s too early to tell how productive this setup will be. There was a surprising amount of set up involved to get the pieces working together. So, I created a starter app that I plan to use whenever I have a new Laravel/Vue.js app.

It is here: https://github.com/paulrosen/laravel-vue-starter

I hope to keep this up to date as Laravel, webpack, and Vue.js change, but I’m guessing I won’t. I will also add new features as I need them. As I’m developing this app, I’m trying to keep in mind what things I’m doing that are generic, and will move them to this project as I go.

It’s Late September and I Really Should be Back at School

There’s always a tension between using the technologies that one is already good at vs. learning the coolest new things. People pay me to do things I’m good at, which means if I’m not always pushing, I’ll end up getting lots of practice doing things that are going out of style. OTOH, fads and frameworks come and go all the time, especially in JavaScript, so I could spend all my time getting no products out the door.

I told you that to tell you this — I’m heading to the woodshed to put a couple more notches on my belt. Look for Angular 2 and node.js on my linkedin profile soon!

[Edit: — Hah! best laid plans. I did do an Angular 2 tutorial, but then immediately did a couple of small React apps, then learned Vue.js and am hoping to start all new projects with that.]