Metronome logo

Documentation

Setting up Metronome in an Express project

As Remix Blues Stack uses an Express server, this guide can also be used to install Metronome in that stack.

Install Remix with the Express 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 Express Server and press enter.

1. Install Metronome

Install Metronome React and Express packages

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

2. Initialize Metronome

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

Terminal
npx metronome init

3. Configure Metronome in your server.js file

  1. Import createMetronomeGetLoadContext and registerMetronome from the @metronome-sh/express module in your server.js file.
server.js
import {
  createMetronomeGetLoadContext,
  registerMetronome,
} from "@metronome-sh/express";
  1. Register Metronome in the build by using the registerMetronome function in your server.js file.
server.js
const buildWithMetronome = registerMetronome(require(BUILD_DIR));
  1. create the getLoadContext function using createMetronomeGetLoadContext with buildWithMetronome as first argument and also the config file import as an option.
server.js
const metronomeGetLoadContext = createMetronomeGetLoadContext(
  buildWithMetronome,
  { config: require("./metronome.config.js") }
);

Using Blues Stack

For Remix Blues Stack, you may need to require metronome.config.js at an upper level of your server.ts file. Note the require("../metronome.config.js")

server.ts
// Using Remix Blues Stack
const metronomeGetLoadContext = createMetronomeGetLoadContext(
  buildWithMetronome,
  { config: require("../metronome.config.js") }
);

d. In both createRequestHandler functions, replace the build prop with buildWithMetronome and add the getLoadContext prop with metronomeGetLoadContext

Your app.all function shoud look like this:

server.js
app.all(
  "*",
  process.env.NODE_ENV === "development"
    ? (req, res, next) => {
        purgeRequireCache();


        return createRequestHandler({
          build: buildWithMetronome,
          mode: process.env.NODE_ENV,
          getLoadContext: metronomeGetLoadContext,
        })(req, res, next);
      }
    : createRequestHandler({
        build: buildWithMetronome,
        mode: process.env.NODE_ENV,
        getLoadContext: metronomeGetLoadContext,
      })
);

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,
  createMetronomeGetLoadContext,
  registerMetronome,
} from "@metronome-sh/express";


// ...


// register Metronome in the build and create Metronome's getLoadContext
const buildWithMetronome = registerMetronome(require(BUILD_DIR));


const metronomeGetLoadContext = createMetronomeGetLoadContext(
  buildWithMetronome,
  { config: require("./metronome.config.js") }
);


// Combine your existing getLoadContext with Metronome's
const getLoadContext = combineGetLoadContexts(
  yourCustomGetLoadContext,
  metronomeGetLoadContext
);


// ...


app.all(
  "*",
  process.env.NODE_ENV === "development"
    ? (req, res, next) => {
        purgeRequireCache();


        return createRequestHandler({
          build: buildWithMetronome,
          mode: process.env.NODE_ENV,
          getLoadContext,
        })(req, res, next);
      }
    : createRequestHandler({
        build: buildWithMetronome,
        mode: process.env.NODE_ENV,
        getLoadContext,
      })
);

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:

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

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.

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.

Remix + Netlify