Setting up Metronome in a Netlify project

Install Remix with the Netlify adapter

If you have already installed Remix, you can skip this section.

Terminal


npx create-remix@latest

Name your project (e.g. "my-remix-app")
After you name your project, select Just the basics and press enter.
Select Netlify and press enter.

Install Metronome

Install Metronome React and Netlify packages

Terminal


npm install @metronome-sh/react @metronome-sh/netlify

Configure Metronome in your server.js file

Import combineGetLoadContexts, createMetronomeGetLoadContext, and registerMetronome from the @metronome-sh/netlify module in your server.js file.

server.js


import {
  combineGetLoadContexts,
  createMetronomeGetLoadContext,
  registerMetronome,
} from "@metronome-sh/netlify";

server.js


const buildWithMetronome = registerMetronome(build);

create Metronome's getLoadContext function using createMetronomeGetLoadContext with the buildWithMetronome variable as argument.

server.js


const metronomeGetLoadContext =
  createMetronomeGetLoadContext(buildWithMetronome);

In the createRequestHandler function, replace the build prop with buildWithMetronome and combine the existing getLoadContext with the metronomeGetLoadContext using combineGetLoadContexts:

server.js


export const handler = createRequestHandler({
  build: buildWithMetronome,
  getLoadContext: combineGetLoadContexts(
    getLoadContext,
    metronomeGetLoadContext
  ),
  mode: process.env.NODE_ENV,
});

Your server.js file should now look like this:

server.js


import {
  combineGetLoadContexts,
  createMetronomeGetLoadContext,
  registerMetronome,
} from "@metronome-sh/netlify";
import * as build from "@remix-run/dev/server-build";
import { createRequestHandler } from "@remix-run/netlify";

const buildWithMetronome = registerMetronome(build);
const metronomeGetLoadContext =
  createMetronomeGetLoadContext(buildWithMetronome);

/*
 * Returns a context object with at most 3 keys:
 *  - `netlifyGraphToken`: raw authentication token to use with Netlify Graph
 *  - `clientNetlifyGraphAccessToken`: For use with JWTs generated by
 *    `netlify-graph-auth`.
 *  - `netlifyGraphSignature`: a signature for subscription events. Will be
 *    present if a secret is set.
 */
function getLoadContext(event, context) {
  let rawAuthorizationString;
  let netlifyGraphToken;

  if (event.authlifyToken != null) {
    netlifyGraphToken = event.authlifyToken;
  }

  let authHeader = event.headers["authorization"];
  let graphSignatureHeader = event.headers["x-netlify-graph-signature"];

  if (authHeader != null && /Bearer /gi.test(authHeader)) {
    rawAuthorizationString = authHeader.split(" ")[1];
  }

  let loadContext = {
    clientNetlifyGraphAccessToken: rawAuthorizationString,
    netlifyGraphToken: netlifyGraphToken,
    netlifyGraphSignature: graphSignatureHeader,
  };

  // Remove keys with undefined values
  Object.keys(loadContext).forEach((key) => {
    if (loadContext[key] == null) {
      delete loadContext[key];
    }
  });

  return loadContext;
}

export const handler = createRequestHandler({
  build: buildWithMetronome,
  getLoadContext: combineGetLoadContexts(
    getLoadContext,
    metronomeGetLoadContext
  ),
  mode: process.env.NODE_ENV,
});

Configure Metronome in your root.tsx file

After you have configured the server side of Metronome in your app, you need to set up the client side with @metronome-sh/react to be able to track your app's Web Vitals.

Simply import MetronomeLinks from @metronome-sh/react:

root.tsx


import { MetronomeLinks } from "@metronome-sh/react";

You should render the <MetronomeLinks /> component between your <head> tags.

root.tsx


export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
        <MetronomeLinks />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

Create a new project in Metronome

To create a new project, please follow the instructions in the Creating a new project section.

Set your API key in your production environment

In Site settings → Build & Deployment → Environment, set the METRONOME_API_KEY environment variable:

Deploy your project

Once you have your METRONOME_API_KEY set up, deploy your project to production, after your first couple of visits, you should be able to see metrics.

Remix + Express

Remix + Vercel