Express.js

Repository: https://github.com/flayyer/integration-examples/tree/main/examples/express

The JavaScript module @flayyer/flayyer is the only dependency you will need. In this guide we are going to show how it can be integrated with Express.js. This guide is only a basic example and you should adapt it to your needs.

Setup#

We assume you already have a project. If not, you can create a new one with:

Yarn
NPM

Terminal.app

yarn global add express-generator
express my-app
cd my-app
yarn install

Then install @flayyer/flayyer:

Terminal.app

yarn add @flayyer/flayyer

Then add Flayyer on your routers, controllers and handlers. Example:

routes/index.js

// Require `FlayyerIO` class constructor
const { FlayyerIO } = require("@flayyer/flayyer");

// Express stuff
const express = require('express');
const router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  const flayyer = new FlayyerIO({
    tenant: "your-tenant-slug",
    deck: "my-project",
    template: "main",
    variables: {
      title: "Hello world!",
    },
  })
  // Pass `flayyer` variables to views.
  // In particular to `views/layout.jade`.
  res.render('index', { title: 'Express', flayyer: flayyer });
});

Template engines#

Use your favorite view engine, just make sure to render these three metatags:

const url = flayyer.href();

<meta property="og:image" content={url} />
<meta name="twitter:image" content={url} />
<meta name="twitter:card" content="summary_large_image" />

Jade#

On your layout views:

views/layout.jade

head
  meta(property='og:image', content='#{flayyer}')
  meta(name='twitter:image', content='#{flayyer}')
  meta(name='twitter:card', content='summary_large_image')

caution

Rendering <meta /> inside the <body /> of your pages will no have the desired effect. Make sure you always render Flayyer URLs in the <head /> of your pages.