Setting up Metronome in a Netlify project

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

1. Install Metronome

Install Metronome React and Netlify packages

Terminal


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

2. Initialize Metronome

To create Metronome's metronome.config.js file, you need to run the init command.

Terminal


npx metronome init

3. 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 the getLoadContext function using createMetronomeGetLoadContext with buildWithMetronome as first argument and also the config file import as an option.

server.js


const metronomeGetLoadContext = createMetronomeGetLoadContext(
  buildWithMetronome,
  { config: require("./metronome.config.js") }
);

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,
  { config: require("./metronome.config.js") }
);

/*
 * 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,
});

4. 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>
  );
}

5. Create a new project in Metronome

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

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