Non-Potable Macchiato

    akili-connect

    1.2.1 • Public • Published

    akili-connect npm version

    Library to implement server-side rendering for Akili framework.
    It is based on jsdom.

    Example

    const akiliConnect = require('akili-connect');
    const express = require('express');
    const path = require('path');
    const app = express();
    
    const middleware = akiliConnect({
      indexFile: path.join(__dirname, 'public/templates/index.html')
    });
    
    app.get('/', middleware.route);
    app.get('/home', middleware.route);
    app.get('/docs/*', middleware.route);
    app.get('*', middleware.index);
    
    app.listen(3000, function () {
      console.log('Server run on 3000 port');
    });

    Description

    All you need is to use route middleware for the necessary routing path and index middleware to get index file.

    Options

    • {string} [indexFile] - path to the index file. Required if you are going to use index middleware
    • {string} [indexUrl] - index middleware url
    • {number} [port] - application port
    • {string} [protocol] - application protocol
    • {string} [host] - application host
    • {Object} [jsdomOptions] - jsdom options
    • {function} [onDomInit] - called after DOM creation. You can change window state here before the Akili application is initialized.
    • {function} [beforeSerialization] - called before the DOM serialization. You can get the window object and do anything with it last time.
    • {function} [afterSerialization] - called after the DOM serialization. You can get the actual html and change it last time. You have to return a new html string.

    Polyfills

    You might need missing functions in jsdom or stubs for them. You can write it yourself.

    const polyfill = require('akili-connect/polyfill');
    
    polyfill.someFunction = (window) => {
      window.someFunction = () => {};
    };

    Client side

    Don't forget to initialize your Akili application on the client side!
    Server sends the part of html to replace only the root element content.

    document.addEventListener('DOMContentLoaded', () => {
      Akili.init(document.body).catch((err) => console.error(err));;
    });
    if(window.AKILI_SSR) {
      // the server-side rendering
    }
    else {
      // the client-side rendering
    }

    If you want to remove some elements during the rendering on the server side you can add attribute no-ssr to them.

    <app>
      <div no-ssr>it's useless for SEO</div>
      <div>it's necessary</div>
    </app>  

    Install

    npm i akili-connect

    Homepage

    akilijs.com

    DownloadsWeekly Downloads

    106

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    7.6 kB

    Total Files

    7

    Last publish

    Collaborators

    • ortex