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.
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
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.
npx metronome init
3. Configure Metronome in your server.js file
- Import
combineGetLoadContexts
,createMetronomeGetLoadContext
, andregisterMetronome
from the@metronome-sh/netlify
module in your server.js file.
import {combineGetLoadContexts,createMetronomeGetLoadContext,registerMetronome,} from "@metronome-sh/netlify";
- Register Metronome in the build by using the
registerMetronome
function in your server.js file.
const buildWithMetronome = registerMetronome(build);
- create the
getLoadContext
function usingcreateMetronomeGetLoadContext
withbuildWithMetronome
as first argument and also the config file import as an option.
const metronomeGetLoadContext = createMetronomeGetLoadContext(buildWithMetronome,{ config: require("./metronome.config.js") });
- In the
createRequestHandler
function, replace thebuild
prop withbuildWithMetronome
and combine the existinggetLoadContext
with themetronomeGetLoadContext
usingcombineGetLoadContexts
:
export const handler = createRequestHandler({build: buildWithMetronome,getLoadContext: combineGetLoadContexts(getLoadContext,metronomeGetLoadContext),mode: process.env.NODE_ENV,});
Your server.js file should now look like this:
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 valuesObject.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
:
import { MetronomeLinks } from "@metronome-sh/react";
You should render the <MetronomeLinks />
component between your <head>
tags.
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.