ilc-server-sdk

SDK for server side communication with Isomorphic Layout Composer

1.2.3

latest

source

npm

Version published: 4 years ago

Weekly downloads: 17; increased by142.86%

Maintainers: 1

Install size: 48.3 kB

Created: 4 years ago

Weekly downloads

Readme

Source

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 = {
        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:

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.

FAQs

What is ilc-server-sdk?

Is ilc-server-sdk popular?

Is ilc-server-sdk well maintained?

Last updated on 23 Sep 2020

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.

Install