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.
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
Express Server
and press enter.
1. Install Metronome
Install Metronome React and Express packages
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.
npx metronome init
3. Configure Metronome in your server.js file
- Import
createMetronomeGetLoadContext
andregisterMetronome
from the@metronome-sh/express
module in your server.js file.
import {createMetronomeGetLoadContext,registerMetronome,} from "@metronome-sh/express";
- Register Metronome in the build by using the
registerMetronome
function in your server.js file.
const buildWithMetronome = registerMetronome(require(BUILD_DIR));
- 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") });
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")
// Using Remix Blues Stackconst 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:
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:
import {combineGetLoadContexts,createMetronomeGetLoadContext,registerMetronome,} from "@metronome-sh/express";// ...// register Metronome in the build and create Metronome's getLoadContextconst buildWithMetronome = registerMetronome(require(BUILD_DIR));const metronomeGetLoadContext = createMetronomeGetLoadContext(buildWithMetronome,{ config: require("./metronome.config.js") });// Combine your existing getLoadContext with Metronome'sconst 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
:
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.
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.