Setting up Metronome in a Vercel project
0. Install Remix with the Vercel 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
Vercel
and press enter.
1. Install Metronome
Install Metronome React and Vercel packages
npm install @metronome-sh/react @metronome-sh/vercel
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
createMetronomeGetLoadContext
andregisterMetronome
from the@metronome-sh/vercel
module in your server.js file.
import {createMetronomeGetLoadContext,registerMetronome,} from "@metronome-sh/vercel";
- 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 add thegetLoadContext
prop withmetronomeGetLoadContext
:
export default createRequestHandler({build: buildWithMetronome,getLoadContext: metronomeGetLoadContext,mode: process.env.NODE_ENV,});
Your server.js file should now look like this:
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,{ config: require("./metronome.config.js") });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:
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,});
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
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.