Audible.js is a tool for Vue.js to enable staged deployments.
Audibles are used in american football when the quaterback wants to change the play during the pre snap. Just like in football, audible.js changes the configuration during runtime just before it reaches the client (which would be the snap in this case).
Configuration in Vue.js is mostly done using "environment files" (eg. .env.development). The configuration is chosen using environment variables and baked into the javascript bundle with webpack. This is a quick and fine way to provide configuration for Vue.js applications. But it has one major drawback: Deployments for different stages require a separate build/bundle for each stage. This makes it especially hard for continous integration.
Drawbacks of multiple bundles :
- The time to release takes longer, because we need multiple build pipeline runs.
- We need to maintain multiple build pipelines.
- A successful test of the test stage build does not mean we have a working prod stage build. We can't be 100% certain since both build artifacts come from different pipelines.
To overcome this issue, audible.js changes the configuration during runtime. Before the vue.js instance is created, audible tries to gather the configuration from a specified endpoint and "bake" it into the application.
Use the audible.call
function to change the configuration during runtime.
import audible from '@csiber/audible';
audible.call('/configuration/appsettings.json', options).then(postSnapOptions => {
const vm = new Vue(postSnapOptions);
});
The configuration target defines where the configuration will be stored. There are currently 2 targets supported:
- window object
- provide/inject (Vue)
This target stores the configuration object to the global window object.
import audible from '@csiber/audible';
audible.call('/configuration/appsettings.json', options, { target: 'window' }).then(postSnapOptions => {
const vm = new Vue(postSnapOptions);
});
Usage:
console.log(window.apiUrl);
This target provides the configuration with the provide/inject mechanism of Vue.
import audible from '@csiber/audible';
audible.call('/configuration/appsettings.json', options, { target: 'inject' }).then(postSnapOptions => {
const vm = new Vue(postSnapOptions);
});
Usage:
import audible, { CONFIGURATION_PROVIDER } from '@csiber/audible';
Vue.component('sample', {
inject: { config: CONFIGURATION_PROVIDER },
mounted: function() {
console.log(this.config.apiUrl);
}
});