Metronome logo


Setting up Metronome in Remix using its built-in app server

Templates and Stacks that use Remix built-in app server don't expose a server.js file. That's why it needs to be patched if you want to use Metronome with them.

0. Install Remix using the Fly template

If you have already installed Remix, you can skip this section.

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 Fly and press enter.

1. Add patch @remix-run/serve to your postinstall script in package.json

"postinstall": "metronome patch @remix-run/serve"

3. Install Metronome

Install Metronome React and Express packages

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

The post install should have patched the app server.

> postinstall
> metronome patch @remix-run/serve
@remix-run/serve is patched:

4. Initialize Metronome

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

npx metronome init

5. 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">
<Meta />
<Links />
<MetronomeLinks />
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />

6. Set your API key in your production environment

After you created you new project in, you need to set the METRONOME_API_KEY environment variable in your production environment.

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.