Nighttime Pachinko Marathon
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

akili-connect

1.2.0 • 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

DownloadsWeekly Downloads

10

Version

1.2.0

License

MIT

Unpacked Size

7.6 kB

Total Files

7

Homepage

akilijs.com

Last publish

Collaborators

  • avatar