Introduction

It was a tough time to be alone, application codebases across the platforms lay dispersed throughout the cloud. How could one hacker deploy an app to every relevant platform without expending a life of development time reaching these targets?

Isomorphic — Having identical relevant structure; being structure-preserving while undergoing certain invertible transformations.

Enter the Vue CLI, in combination with some godlike plugins we can have an isomorphic progressive client that lives alongside a fully ECMAScript 2018 spec’d Node API. Where, each piece is contained in one source of truth for all application deployments. As a lone wolf developer, this unlocks the full spectrum of the stack to hit as many targets as possible in one shot.

The Construct

We start with a single directory named for our project. We will take advantage of yarn wokspaces to sync the node_modules/ of our pieces.

mkdir the-one && cd $_ yarn init -y git init

We can then edit the newly created root package.json to include the workspace information. Our workspaces in this case are frontend/ , frontend/src-cordova/ , and backend/ because they all have their own package.json . This allows us to install all dependencies across the project stack with one command; yarn .

Example file tree

In the frontend/ groundwork is laid by the Vue CLI.

yarn add global @vue/cli vue create frontend cd frontend vue add cordova vue add @vue/pwa vue add @uvue/ssr

With the backend/ I prefer a custom pattern to generated norms. It is based on a fractal, essentially every directory is a connected expansion of the root.

However, this API pattern is up to the architect and can be interchanged freely!