This guide explains step by step how to integrate a Kuika application into an external application using Web View element technology. The integration includes an authentication flow and provides dedicated examples for popular JavaScript libraries.
You have two options for including the kuika-mfe_1_0_0.js loader script, which is the first step of the integration, in your project:
You can use the script directly from the public URL provided by Kuika. This is the easiest and fastest method.
URL: https://platform.kuika.com/assets/kuika-mfe_1_0_0.js
Alternatively, you can download this file and host it on your own servers. This gives you more flexibility in terms of version control and network management. If you choose this method, you should replace the src path of the script tag in the code examples below with your own address.
The HTML tag of the Kuika application you want to integrate does not have a static name. The tag name is dynamically generated based on your workspace and project name in Kuika.
Rule: It is named in the format workspace-name-project-name, entirely in lowercase with hyphens (-) between words (kebab-case).
Example
Workspace Name: BenimSirketim
Project Name: MasrafUygulamasi
Generated HTML Tag: <benim-sirketim-masraf-uygulamasi>
If you are unsure about the tag name, the most reliable method is as follows:
1. Open the Kuika application you want to integrate as an MFE in your browser.
2. Open the Developer Tools Console.
3. Type window.kuika.getModule() in the console and run it.
This command will give you a simple HTML output containing the correct tag name needed to integrate your application. In all the code examples below, replace <your-application-tag> with the tag you found using this command.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Host Application</title>
<script src="https://platform.kuika.com/assets/kuika-mfe_1_0_0.js"></script>
</head>
<body>
<h1>Host Uygulama</h1>
<div id="kuika-mfe-container">
<uygulamanizin-etiketi
external_access_token="<host_uygulamanin_access_tokeni>"
external_refresh_token="<host_uygulamanin_refresh_tokeni>"
external_username="user@example.com"
starting_screen="dashboardscreen"
></uygulamanizin-etiketi>
</div>
<script>
const kuikaAppConfig = {
frontEndUrl: '''https://<uygulamanizin-kuika-adresi>'''
};
if (window.CreateKuikaMfeApp) {
CreateKuikaMfeApp(kuikaAppConfig);
} else {
window.addEventListener('load', () => CreateKuikaMfeApp(kuikaAppConfig));
}
</script>
</body>
</html>
import React, { useEffect } from 'react';
const KuikaMfeWrapper = ({ accessToken, refreshToken, userEmail }) => {
useEffect(() => {
const scriptUrl = 'https://platform.kuika.com/assets/kuika-mfe_1_0_0.js';
const mfeAppUrl = '''https://<uygulamanizin-kuika-adresi>''';
const initializeMfe = () => {
if (window.CreateKuikaMfeApp) {
window.CreateKuikaMfeApp({ frontEndUrl: mfeAppUrl });
}
};
let script = document.querySelector(`script[src="${scriptUrl}"]`);
if (!script) {
script = document.createElement('script');
script.src = scriptUrl;
script.async = true;
document.head.appendChild(script);
script.onload = initializeMfe;
} else if (window.CreateKuikaMfeApp) {
initializeMfe();
} else {
script.addEventListener('load', initializeMfe);
}
return () => {
if (script) {
script.removeEventListener('load', initializeMfe);
}
};
}, []);
return (
<uygulamanizin-etiketi
external_access_token={accessToken}
external_refresh_token={refreshToken}
external_username={userEmail}
starting_screen="dashboardscreen"
></uygulamanizin-etiketi>
);
};
main.js Configuration
A general rule must be added to Vue to recognize custom elements. This rule accepts all tags containing a hyphen (-) as Web View elements.
app.config.compilerOptions.isCustomElement = (tag) => tag.includes('-');
KuikaMfeWrapper.vue Component
<template>
<uygulamanizin-etiketi
:external_access_token="accessToken"
:external_refresh_token="refreshToken"
:external_username="userEmail"
:starting_screen="dashboardscreen"
></uygulamanizin-etiketi>
</template>
<script>
import { onMounted, onUnmounted } from 'vue';
export default {
name: 'KuikaMfeWrapper',
props: { accessToken: String, refreshToken: String, userEmail: String },
setup() {
const scriptUrl = 'https://platform.kuika.com/assets/kuika-mfe_1_0_0.js';
const mfeAppUrl = '''https://<uygulamanizin-kuika-adresi>''';
let script = null;
const initializeMfe = () => {
if (window.CreateKuikaMfeApp) {
window.CreateKuikaMfeApp({ frontEndUrl: mfeAppUrl });
}
};
onMounted(() => {
script = document.querySelector(`script[src="${scriptUrl}"]`);
if (!script) {
script = document.createElement('script');
script.src = scriptUrl;
script.async = true;
document.head.appendChild(script);
script.onload = initializeMfe;
} else if (window.CreateKuikaMfeApp) {
initializeMfe();
} else {
script.addEventListener('load', initializeMfe);
}
});
onUnmounted(() => {
if (script) {
script.removeEventListener('load', initializeMfe);
}
});
},
};
</script>
app.module.ts Configuration
schemas: [CUSTOM_ELEMENTS_SCHEMA]
kuika-mfe-wrapper.component.ts Component
import { Component, OnInit, OnDestroy, Input } from '@angular/core';
@Component({
selector: 'app-kuika-mfe-wrapper',
template: `
<uygulamanizin-etiketi
[attr.external_access_token]="accessToken"
[attr.external_refresh_token]="refreshToken"
[attr.external_username]="userEmail"
[attr.starting_screen]="dashboardscreen"
></uygulamanizin-etiketi>
`,
})
export class KuikaMfeWrapperComponent implements OnInit, OnDestroy {
@Input() accessToken: string;
@Input() refreshToken: string;
@Input() userEmail: string;
private script: HTMLScriptElement;
private readonly scriptUrl = 'https://platform.kuika.com/assets/kuika-mfe_1_0_0.js';
private readonly mfeAppUrl = '''https://<uygulamanizin-kuika-adresi>''';
private initializeMfe = () => {
if ((window as any).CreateKuikaMfeApp) {
(window as any).CreateKuikaMfeApp({ frontEndUrl: this.mfeAppUrl });
}
};
ngOnInit(): void {
this.script = document.querySelector(`script[src="${this.scriptUrl}"]`);
if (!this.script) {
this.script = document.createElement('script');
this.script.src = this.scriptUrl;
this.script.async = true;
document.head.appendChild(this.script);
this.script.addEventListener('load', this.initializeMfe);
} else if ((window as any).CreateKuikaMfeApp) {
this.initializeMfe();
} else {
this.script.addEventListener('load', this.initializeMfe);
}
}
ngOnDestroy(): void {
if (this.script) {
this.script.removeEventListener('load', this.initializeMfe);
}
}
}
