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
- Name your project (e.g. "my-remix-app")
- After you name your project, select
Just the basics
and press enter. - 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"><head><Meta /><Links /><MetronomeLinks /></head><body><Outlet /><ScrollRestoration /><Scripts /><LiveReload /></body></html>);}
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.