Skip to main content

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:

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.

Last updated on by Patricio López Juri