Skip to content

🎏 Inject a full web-app into another on the client-side. 🎏

Notifications You must be signed in to change notification settings

Leodau/Client-Side-Transclusion

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

4 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🎏 Client Side Transclusion (really..)

A proof of concept, live injection of multiple exposed applications into a single base page.

Web components to the rescue!

Modules.

1. The VueJS /plugin.

Contains an example VueJS application, on build it gets packaged into a webcomponent (see main.js)

Web components to the rescue!

import Vue from "vue";
import wrap from "@vue/web-component-wrapper";

import App from "./App.vue";

// Parse sources, requirements and build a shadowdom tree.
const wrappedElement = wrap(Vue, App);

// Register a custom element on the destination context.
window.customElements.define("kuzzle-plugin", wrappedElement);

2. The /distant (should be a Kuzzle server exposing plugin front-ends).

Is a minimalistic static server in NodeJS, it exposes the /dist/< plugin name > folder that should contain our wc packaged (dist) VueJS app.

3. The 'base' Service. (the main site we want to inject apps into)

Another NodeJS static server, it exposes the app folder containing a simple index.html file and a app.js script that where the magic happends.

  1. It initializes a Kuzzle SDK instance and exposes it on the window.
  2. Connects to the Kuzzle Backend.
  3. Using loadJs, we load known 'exposed plugins' into the current site as a package.
  4. Creates and appends the newly registered web-component into the page.
// Instantiate a 'global' kuzzle sdk.
window.kuzzle = new KuzzleSDK.Kuzzle(
    new KuzzleSDK.WebSocket('A REAL KUZZLE SERVER URL HERE', { sslConnection:true })
);

kuzzle.on('networkError', error => {
    console.error('Network Error: ', error)
});

kuzzle.on('connected', () => {
    console.log('Successfully connected to Kuzzle')
});


(async() => {
    await kuzzle.connect()

    loadjs(['http://your-distant-service:4000/plugin/kuzzle-plugin/kuzzle-plugin.js'], 'kuzzle-plugin-bundle');

    loadjs.ready('kuzzle-plugin-bundle', function() {
        let plugin = document.createElement('kuzzle-plugin');
        document.body.appendChild(plugin);
    });

})()

Dev Flow.

  1. npm install everywhere.

  2. Update the base/app.js file, your kuzzle host and your local distant(plugin server) url.

  3. Build the app in the plugin folder with:

npm run build -- --target wc --name kuzzle-plugin src/App.vue

  1. Copy the generated dist folder into a new folder < plugin-name > in the distant/dist folder.

  2. Launch both the distant and base services, with node server

  3. Now you can access directly the distant to see the 'standalone' plugin micro-frontend. Or the base to check the injected version of it.

Some resources that may be helpful.

Checkout Kuzzle Backend at Kuzzle.io πŸ”₯

About

🎏 Inject a full web-app into another on the client-side. 🎏

Topics

Resources

Stars

Watchers

Forks