Setting up Metronome Vite plugin

Installation

Instead of using installing various Metronome packages,now you can install the

metronome-sh

package. This package includes all what you need to start using Metronome with Remix and Vite.

Terminal

$npm install metronome-sh

In your Remix

vite.config.ts

file, add the metronome plugin from

metronome-sh/vite

vite.config.js

import { unstable_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()],

});

Note that the vite plugin doesn't use

metronome.config.js

file. Instead, you can configure it in the same

vite.config.ts

. For more information you can go to the Metronome Vite configuration page.

Add the

METRONOME_API_KEY

environment variable in your production server. After you create a new project, you can find it in the settings section of your Metronome project.

Now you can build and deploy your project as usual.