1.1.0 • Published 1 year ago
dashboard-microfrontend v1.1.0
Dashboard Microfrontend - Arisnova
This is a package that provides a dashboard microfrontend to be embedded as iframe in vanilla JS. This package just needs an npm environment to install it.
Getting Started
Dependencies
Installing
SKIP THIS STEP IF PROJECT ALREADY HAS NPM ON IT.**
Setup an NPM environment.
cd root-folder
npm initInstall the microfrontend package in the project.
npm install dashboard-microfrontendNavigate to the file where you want to embed the microfrontend.
cd www/app/views/dashboardEdit corresponding file, for example: dashboard.html and add an iframe with the package "index.html" in src.
# dashboard.html
<iframe src="/node_modules/dashboard-microfrontend/index.html" width="100%" height="100%" defer/>Edit corresponding js file to declare needed dependencies. Is this case, it just need a valid socket instance.
# dashboard.js
window.socket = "Socket instance"Full working example
dashboard.html
# dashboard.html
<html>
<head>
<meta charset="UTF-8" />
<title>test es6 modules</title>
<script src="dashboard.js"/>
</head>
<body>
<h1>Example Dashboard Microfrontend</h1>
<iframe src="/node_modules/dashboard-microfrontend/index.html" width="100%" height="100%" defer/>
</body>
</html>dashboard.js
window.core = { socket: "Socket instance" }package.json
{
"name": "vanilla-js-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"author": "",
"license": "ISC",
"dependencies": {
"dashboard-microfrontend": "^0.0.2"
}
}