Remix (Vite) Quick Start

Quick start guide for Codecov Bundle Analysis and Remix.

Step 1: Install the Codecov Remix Vite Plugin

To install the @codecov/remix-plugin to your project, use the following commands.

npm install @codecov/remix-vite-plugin --save-dev
yarn add @codecov/remix-vite-plugin --dev
pnpm add @codecov/remix-vite-plugin --save-dev

Step 2: Configure the bundler plugin

Add the plugin to the end of your modules array found inside your vite.config.ts file, and pass your configuration.

Note: You can find your global upload token inside your org settings on Codecov.

// vite.config.ts
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { codecovRemixVitePlugin } from "@codecov/remix-vite-plugin";

export default defineConfig({
  plugins: [
    remix(),
    tsconfigPaths()
    // Put the Codecov Remix Vite plugin after all other plugins
    codecovRemixVitePlugin({
      enableBundleAnalysis: true,
      bundleName: "example-remix-bundle",
      uploadToken: process.env.CODECOV_TOKEN,
    }),
  ],
});

Step 3: Commit and push your latest changes

The plugin requires at least one commit to be made to properly upload bundle analysis information up to Codecov.

git add -A && git commit -m "Add Codecov bundler plugin" && git push

Step 4: Build the Application

When building your application the plugin will automatically upload the stats information to Codecov.

npm run build
yarn run build
pnpm run build