ilc-server-sdk
Advanced tools
Server side SDK intended for use inside Micro Frontends to conveniently communicate with Isomorphic Layout Composer.
$ npm i ilc-server-sdk
Vue.js example:
const fs = require('fs');
const express = require('express');
const server = express();
const {createBundleRenderer} = require('vue-server-renderer');
const bundle = require('./dist/vue-ssr-server-bundle.json');
const clientManifest = require('./dist/vue-ssr-client-manifest.json');
const appAssets = {
spaBundle: clientManifest.all.find(v => v.endsWith('.js')),
cssBundle: clientManifest.all.find(v => v.endsWith('.css'))
};
const IlcSdk = require('ilc-server-sdk').default;
const ilcSdk = new IlcSdk({ publicPath: clientManifest.publicPath });
const renderer = createBundleRenderer(bundle, {
template: fs.readFileSync('./index.template.html', 'utf-8'),
clientManifest: clientManifest,
runInNewContext: false,
inject: false
});
server.get('/_ilc/assets-discovery', (req, res) => ilcSdk.assetsDiscoveryHandler(req, res, appAssets));
server.get('*', (req, res) => {
res.setHeader('Content-Type', 'text/html');
const ilcData = ilcSdk.processRequest(req);
const context = {
url: ilcData.getCurrentReqUrl(),
};
renderer.renderToString(context, (err, html) => {
if (err) {
// ...
return;
}
ilcSdk.processResponse(ilcData, res, {
pageTitle: context.meta.inject().title.text(),
pageMetaTags: context.meta.inject().meta.text(),
appAssets,
});
res.send(html);
});
});
See https://namecheap.github.io/ilc-server-sdk/
This is the description of the server side ILC <-> Micro Frontend interface which is implemented by this library in a form of SDK.
With every request for SSR content from the app ILC sends the following meta-information:
Query parameter routerProps
Contains base64 encoded JSON object with the following keys:
basePath - Base path that is relative to the matched route.
So for reqUrl = /a/b/c?d=1 & matched route /a/* base path will be /a/.
While for reqUrl = /a/b/c?d=1 & matched route /a/b/c base path will be /a/b/c.
reqUrl - Request URL string. This contains only the URL that is present in the actual HTTP request.
reqUrl = /status?name=ryan if the request is:
GET /status?name=ryan HTTP/1.1\r\n
Accept: text/plain\r\n
\r\n
(legacy) fragmentName - string with name of the fragment
Query parameter appProps
Sent only if app has some Props defined at the app or route slot level. Contains base64 encoded JSON object with defined Props.
Header x-request-uri. Request URL string. This contains only the URL that is present in the actual HTTP request.
Both query params mentioned here can be decoded in the following manner:
JSON.parse(Buffer.from(req.query.routerProps, 'base64').toString('utf-8'))
App possible response headers:
Link - Check reference.x-head-title - (only primary app) Page title encoded with base64. Will be injected onto <head> tag.
Ex: Buffer.from('<title>Page title</title>', 'utf-8').toString('base64')x-head-meta - (only primary app) Page meta tags encoded with base64.
Ex: Buffer.from('<meta name="description" content="Free Web tutorials"><meta name="keywords" content="HTML,CSS,XML,JavaScript">', 'utf-8').toString('base64')HTTP status code from the primary app will be used to define HTTP status code of the requested page.
FAQs
SDK for server side communication with Isomorphic Layout Composer
We found that ilc-server-sdk demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A flawed sandbox in @nestjs/devtools-integration lets attackers run code on your machine via CSRF, leading to full Remote Code Execution (RCE).
Product
Customize license detection with Socket’s new license overlays: gain control, reduce noise, and handle edge cases with precision.
Product
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.