Library to implement server-side rendering for Akili framework.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
README.md
index.js
middleware.js
package.json
polyfill.js
pre.js
render.js

README.md

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 index file. Required if you going to use index middleware
  • {string} [indexUrl] - index middleware url
  • {number} [port] - application port
  • {string} [protocol] - application protocol
  • {string} [host] - application host
  • {number} [timeout=5000] - time after which the application will be rendered in any case, even if it did not have time to fully load
  • {Object} [jsdomOptions] - jsdom options
  • {function} [onDomInit] - called after DOM creation. You can change window state here before Akili application is initialized.
  • {function} [beforeSerialization] - called before DOM serialization. You can get window object and do anything with it last time.
  • {function} [afterSerialization] - called after 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
}