Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @immowelt/hypernova-express with all npm packages installed. Try it out:

var hypernovaExpress = require("@immowelt/hypernova-express")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@immowelt/hypernova-express v1.0.4

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

@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.

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free