Setting up Metronome Vite plugin for Remix in a Cloudflare environment
Before deploying
To be able to use Metronome in a Cloudflare environment, you must enable the in the in your file.For more information, check the Cloudflare documentation.
nodejs_compat
compatibility_flags
wrangler.toml
Installation
Start by installingmetronome-sh
Terminal
$npm install metronome-sh
Configuration
In your Remixvite.config.ts
metronome-sh/vite
vite.config.js
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { metronome } from "metronome-sh/vite";
export default defineConfig({
plugins: [
remix(),
tsconfigPaths(),
metronome()
],
});
METRONOME_API_KEY
To be able to send data to Metronome, you need to provide your Metronome API key. You can do this by setting the environment variable in your production server.
METRONOME_API_KEY
Uploading source maps to Metronome
If you're using the errors source map feature in Metronome, you need to provide your Metronome API key at build time to be able to upload the source maps. You can do this by setting the environment variable in your build script.
METRONOME_API_KEY
METRONOME_API_KEY
Build and deploy
Now you can build and deploy your project as usual.Using self hosted Metronome
If you're using Metronome self-hosted, you need to set your endpoint URL in the metronome plugin options:vite.config.js
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { metronome } from "metronome-sh/vite";
export default defineConfig({
plugins: [
remix(),
tsconfigPaths(),
metronome({
endpoint: "https://metronome.yourdomain.com"
})
],
});
Debugging and see the data sent to Metronome
If you want to see the data that is sent to Metronome, you can set thedebug
true
vite.config.js
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { metronome } from "metronome-sh/vite";
export default defineConfig({
plugins: [
remix(),
tsconfigPaths(),
metronome({
debug: true
})
],
});