Metronome logo

Documentation

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
  1. Name your project (e.g. "my-remix-app")
  2. After you name your project, select Just the basics and press enter.
  3. 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

  1. Import createMetronomeGetLoadContext and registerMetronome from the @metronome-sh/vercel module in your server.js file.
server.js
import {
createMetronomeGetLoadContext,
registerMetronome,
} from "@metronome-sh/vercel";
  1. Register Metronome in the build by using the registerMetronome function in your server.js file.
server.js
const buildWithMetronome = registerMetronome(build);
  1. create the getLoadContext function using createMetronomeGetLoadContext with buildWithMetronome as argument.
server.js
const metronomeGetLoadContext =
createMetronomeGetLoadContext(buildWithMetronome);
  1. 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.