Runtime Injection

The implementation of runtime injection requires few steps that must be followed. Each of these steps is described here:

Packages

Loading standard packages for execution gulp building of SCSS files + vite to bundling a Vue app.

{
  "scripts": {
    "styles": "gulp default",
    "portal": "vite build --config portal.config.js"
  },
  "devDependencies": {
    "@emeraude-framework/portal-runtime-injection": "^0.1.5",
    "@vue/compiler-sfc": "^3.2.21",
    "@vitejs/plugin-vue": "^1.10.2",
    "del": "^3.0.0",
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-cssmin": "^0.2.0",
    "gulp-sass": "^5.0.0",
    "merge-stream": "^2.0.0",
    "node-sass": "^6.0.1",
    "sass": "^1.37.5",
    "vue": "^3.2.20",
    "vue-loader": "^16.8.2",
    "vite": "^2.7.1",
    "rollup-plugin-vue": "^6.0.0"
  }
}

Bundle injection initialization

Vue injector main initialization file:

// App/Portal/src/main.js
import { initializeRuntimeInjection } from "@emeraude-framework/portal-runtime-injection"
import createInsightsCustomViewComponent from "./components/insights-custom-view-component";

initializeRuntimeInjection((app, vueBundler) => {
    app.component('InsightsCustomView', createInsightsCustomViewComponent(vueBundler));
})

// App/Portal/src/components/insights-custom-view-component.js
export default function ({compile}) {
    const render = compile(`
<div>
    <div class="alert alert-warning">{{ message }}</div>
</div>
`);

    return {
        render,
        data() {
            return {
                message: 'ToDo: to create a custom view for the insights..'
            }
        },
        props: {

        },
        inject: ['$httpClient'], // injects the Portal HTTP client that has all base setup configured
        mounted() {
        }
    }
}

Vite config

Bundle configuration that takes the Vue initializer and makes the bundle that we are going to inject into the portal.

// App/portal.config.js
import vue from 'rollup-plugin-vue'
import {RUNTIME_INJECTION_BUNDLE_FILE_NAME} from '@emeraude-framework/portal-runtime-injection'
import path from 'path'
import { defineConfig } from 'vite'

module.exports = defineConfig({
    plugins: [vue()],
    build: {
        outDir: path.resolve(__dirname, 'privateroot/portal'),
        emptyOutDir: false,
        lib: {
            entry: path.resolve(__dirname, 'Portal/src/main.js'),
            formats: ['iife'],
            name: RUNTIME_INJECTION_BUNDLE_FILE_NAME,
            fileName: () => RUNTIME_INJECTION_BUNDLE_FILE_NAME
        },
        rollupOptions: {
            external: ['vue'],
            output: {
                globals: {
                    vue: 'Vue'
                }
            }
        }
    }
})

Gulp config

Configuration for building SCSS files into a CSS file that we are going to inject into the portal.

const gulp = require("gulp"),
    concat = require('gulp-concat'),
    sass = require('gulp-sass')(require('sass')),
    cssmin = require('gulp-cssmin');

const { RUNTIME_INJECTION_STYLE_FILE_NAME } = require("emeraude-portal-runtime-injection");

gulp.task('portal-styles', () =>
    gulp.src('./Portal/style/**/*.scss')
        .pipe(sass())
        .pipe(cssmin({ keepSpecialComments: 0 }))
        .pipe(concat(RUNTIME_INJECTION_STYLE_FILE_NAME))
        .pipe(gulp.dest('./privateroot/portal/'))
);

gulp.task('default', gulp.series('portal-styles'));