marko-js / fastify

Render Marko templates in a Fastify application.

@marko/fastify

Render Marko templates in a Fastify application.

Installation

npm install @marko/fastify

Examples

Setup

Note: the example below assumes that you've configured the environment to handle .marko files. This means using the require hook (@marko/compiler/register) or a bundler like webpack, vite, etc. We recommend using npm init marko -- --template vite-fastify for a more complete example!

import fastify from "fastify";
import markoPlugin from "@marko/fastify";
import Template from "./template.marko";

const app = fastify();

app.register(markoPlugin);

app.get("/", (request, reply) => {
  // Streams Marko template into the response.
  // Forwards errors into fa error handler.
  reply.marko(Template, { hello: "world" });
});

$global / out.global

When calling reply.marko the input.$global is automatically merged with app.locals and reply.locals (both added by this plugin). This makes it easy to set some global data via fastify hook or globally, eg:

app.locals.appName = "My App";

app.addHook("onRequest", (request, reply, done) => {
  reply.locals.locale = "en-US";
  reply.locals.serializedGlobals.locale = true;
  done();
});

Then later in a template access via:

<div>${out.global.appName}: ${out.global.locale}</div>

Using with fastify-compress

fastify-compress does not currently expose a way for Marko to indicate when it is appropriate to flush out content while streaming. The default behavior for zlib is to buffer all content, which we don't wan't if we're trying to send out responses as fast as possible.

To properly use Marko with fastify-compress you should configure it to allow flushing out content as it is written. Marko internally will be sure to only write to the response stream when we've reached a point where we're waiting for async content.

import zlib from "zlib";
import fastifyCompress from "fastify-compress";

fastify.register(fastifyCompress, {
  zlibOptions: {
    flush: zlib.constants.Z_SYNC_FLUSH,
  },
  brotliOptions: {
    flush: zlib.constants.BROTLI_OPERATION_FLUSH,
  },
});

Code of Conduct

This project adheres to the eBay Code of Conduct. By participating in this project you agree to abide by its terms.