Metronome logo

Documentation

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.

Install Remix using the Fly template

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

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

package.json
"postinstall": "metronome patch @remix-run/serve"

Install Metronome

Install Metronome React and Express packages

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

The post install should have patched the app server.

Terminal
> postinstall
> metronome patch @remix-run/serve


@remix-run/serve is patched:

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>
  );
}

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.

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.

Reference