Setting up Metronome with Remix + Express / Remix Blues Stack

Install Metronome

Install Metronome's react and express prerelease packages.

Terminal

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

alternatively, you can use yarn:

Terminal

$yarn add @metronome-sh/react @metronome-sh/express

The

metronome.config.js

is used to set what your project sends to Metronome. Create it by running the command below.

Terminal

$npx metronome init

To be able to track your app's Web Vitals and Web Analytics, you need to set up the client side with

@metronome-sh/react

.Import

withMetronome

from

@metronome-sh/react

and add wrap your App component with it.

root.tsx

// ...

import { withMetronome } from "@metronome-sh/react";

// Remove the default export of App

function App() {

return (

<head>

</head>

<body>

</body>

</html>

);

}

// Set withMetronome as the default export

export default withMetronome(App);

In your

server.js

, just replace the import of

createRequestHandler

from

@remix-run/express

@metronome-sh/express

function with the following:

// import { createRequestHandler } from "@remix-run/express";

import { createRequestHandler } from "@metronome-sh/express";

This will enable Metronome to handle the requests and responses.It essentially invokes the

createRequestHandler

from

@remix-run/express

for you and augments it using Metronome's code.

Add the

METRONOME_API_KEY

environment variable in your production server. You can find it in the settings section of your Metronome project.