Setting up Metronome in a Vercel project

Install Remix with the Vercel 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 Vercel and press enter.

Install Metronome

Install Metronome React and Vercel packages

Terminal


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

Configure Metronome in your server.js file

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

server.js


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

server.js


const buildWithMetronome = registerMetronome(build);

create the getLoadContext function using createMetronomeGetLoadContext with buildWithMetronome as argument.

server.js


const metronomeGetLoadContext =
  createMetronomeGetLoadContext(buildWithMetronome);

In the createRequestHandler function, replace the build prop with buildWithMetronome and add the getLoadContext prop with metronomeGetLoadContext:

server.js


export default createRequestHandler({
  build: buildWithMetronome,
  getLoadContext: metronomeGetLoadContext,
  mode: process.env.NODE_ENV,
});

Your server.js file should now look like this:

server.js


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

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

export default createRequestHandler({
  build: buildWithMetronome,
  getLoadContext: metronomeGetLoadContext,
  mode: process.env.NODE_ENV,
});

Using multiple getLoadContext

If you already have a getLoadContext function, you can combine Metronome's getLoadContext with your existing by importing the combineGetLoadContexts helper:

server.js


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

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

// ... your other getLoadContext functions ...

export default createRequestHandler({
  build: buildWithMetronome,
  getLoadContext: combineGetLoadContexts(
    yourCustomGetLoadContext,
    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

After you created you new project in https://metronome.sh, you need to set the METRONOME_API_KEY environment variable in your production environment.

In Settings → Environment Variables

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 + Netlify

Remix App Server