Migrate a Keestash App from jQuery to Vue.Js

Image for post
Image for post
Keestash Logo

Modular Keestash: Apps

I believe in modular code structures and am firmly convinced that monolithic software structures will get unmaintainable. Therefore, I structured key components of Keestash as modular parts of source code, called apps.

Keestash Installation Process

Keestash asks for several input data in order to install databases, checks file and directory permissions as well as for missing files or directories. If missing or incomplete, a simple web UI asks for the input or points to the files/directories and provides a button to check again.

App Webpack Config

As I stated before, we are using Webpack for module bundling in Keestash. Since source code is — mostly — organized as apps, we can simply create a webpack config for each app. This decouples the code from the core, enables a modular structure for which we are looking for and lets us define app specific requirements.

module: {
rules: [
{
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.vue$/,
exclude: /node_modules/,
loader: ['vue-loader']
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
},
],
},
]
},
const appModules = glob.sync("./apps/*/js/webpack.config.js");....const webpackConfig = [].concat(
baseModule
, toConfig(appModules, baseModule)
);
function toConfig(modules, baseModule) {
let conf = [];
for (let i = 0; i < modules.length; i++) {
const configPath = modules[i];
const config = require(configPath);
config.mode = baseModule.mode;
config.node = {fs: 'empty'};
config.module = Object.assign(baseModule.module, config.module || {});
config.resolve = Object.assign(baseModule.resolve, config.resolve || {});
conf.push(config);
}
return conf;
}
module.exports = webpackConfig;

Vue.Js integration

Vue.Js needs an div container to mount it’s virtual DOM. Further, before mounting, we need to provide plugins and — if we want use Vuex — configure the store[efn_note]Currently not used, but introduced in the future.[/efn_note]. The created Vue instance get’s an component injected that denotes the entry point to the app. We call this the “bootstrapping process”:

import App from "./InstallInstance/App";
import BootstrapVue from "bootstrap-vue";
import Vue from 'vue';
import store from "../../../../lib/js/src/Store/store";
window.addEventListener(
'DOMContentLoaded'
, bootstrap
);
function bootstrap() {
const vueConfig = {
store,
render: h => h(App)
};
Vue.use(BootstrapVue);
new Vue(vueConfig)
.$mount("#install_instance_app");
}

Further Work

Keestash Installation can now get implemented in Vue.Js in the frontend. The webpack config enables this for the install_instance app and all other apps. The bootstrapping has to be done for each app seperatelly, but however, Vue.Js enables us to think in components, allows us to reuse it and has overall a better and more modern development approach.

Software Engineer, Algorithms and Data Structures, Machine Learning, Open Source Contributor, Hobby Photographer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store