❤
npm
Sign UpSign In

ilc-server-sdk
TypeScript icon, indicating that this package has built-in type declarations

1.2.3 • Public • Published

Server side SDK for ILC

NPM package NPM downloads

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

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

  2. 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.

  3. 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.

Readme

Keywords

none

Package Sidebar

Install

npm i ilc-server-sdk

Repository

github.com/namecheap/ilc-server-sdk

Homepage

github.com/namecheap/ilc-server-sdk#readme

Weekly Downloads

16

Version

1.2.3

License

Apache-2.0

Unpacked Size

27.4 kB

Total Files

7

Last publish

Collaborators

  • stylet
  • namecheap_npm
Try on RunKit
Report malware