@immowelt/hypernova-express

An express middleware which handles server side rendering via Hypernova from AirBnB.

Stats

StarsIssuesVersionUpdatedCreatedSize
@immowelt/hypernova-express
331.0.43 years ago4 years agoMinified + gzip package size for @immowelt/hypernova-express in KB

Readme

@immowelt/hypernova-express

Powered by Immowelt Build Status Dependency Status devDependency Status Renovate enabled semantic-release

An express middleware which handles server side rendering via Hypernova from AirBnB.

Usage

To install the middleware just execute the following command in your workspace.

yarn add @immowelt/hypernova-express --dev

and configure your express server to use the middleware, e.g.

const express = require('express');
const path = require('path');
const Renderer = require('hypernova-client');
const createHypernovaMiddleware = require('@immowelt/hypernova-express');
const fetch = require('node-fetch');

const app = express();

app.get('/', createHypernovaMiddleware({
    createRequestProps: async (req) => {
        const componentProps = {};

        try {
            const res = await fetch('fetch/some/thing.json');

            componentProps.data = await res.json();
        } catch (e) {}

        return Promise.resolve({
            myRegisteredComponent: componentProps
        });
    },
    templatePath: path.join(__dirname, 'index.html'),
    templateMarker: '<i data-html></i>',
    renderer: new Renderer({
        url: `http://localhost:8081/batch`
    })
}));

API

As seen in the example you can configure the middleware just like any express middleware by passing in an options object.

createHypernovaMiddleware()

const createHypernovaMiddleware = require('@immowelt/hypernova-express');

opts.createRequestProps

A required function that returns a Promise which will resolve with the query/props for the hypernova renderer. The function gets called with the incomming request object from express is the best place to prepare or fetch props for your Component/App that shall be rendered.

opts.templatePath

A required full file-system path to the base template you want to wrap around the response of Hypernova.

opts.templateMarker (optional)

The piece of markup that will be replaced with the HTML retrieved from the Hypernova service.

opts.renderer

The required renderer instance of hypernova-client.

Contributing

See the CONTRIBUTING.md file at the root of the repository.

Licensing

See the LICENSE file at the root of the repository.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.