Ilc-server-sdk NPM

Server side SDK for ILC

Server side SDK intended for use inside Micro Frontends to conveniently communicate with Isomorphic Layout Composer.

Installation

$ npm i ilc-server-sdk

Quick start

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 = {
        ilcData,
        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);
    });

});


/////


import IlcAppSdk from 'ilc-server-sdk/dist/client';

//SSR
const intl = new IlcAppSdk(context.ilcData);

//CSR
const intl = new IlcAppSdk(window.ILC.intl);

JS docs

See https://namecheap.github.io/ilc-server-sdk/

Low level ILC <-> Micro Frontend interface

This is the description of the server side ILC <-> Micro Frontend interface which is implemented by this library in a form of SDK.

Input interface ILC -> Micro Frontend

With every request for SSR content from the app ILC sends the following meta-information: 1. 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'))

Response interface Micro Frontend -> ILC

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.

@types/url-join url-join wrapper-webpack-plugin

@infinitebrahmanuniverse/nolb-ilc @everything-registry/sub-chunk-1898

4 years ago

4 years ago

4 years ago

4 years ago