Codecov Remix Plugin

A Remix plugin that provides bundle analysis support for Codecov.

[!NOTE] This plugin only supports Remix 2.x when building with Vite.

The plugin does not support code coverage, see our docs to set up coverage today!

Installation

Using npm:

1npm install @codecov/remix-vite-plugin --save-dev

Using yarn:

1yarn add @codecov/remix-vite-plugin --dev

Using pnpm:

1pnpm add @codecov/remix-vite-plugin --save-dev

Public Repo Example - GitHub Actions

This configuration will automatically upload the bundle analysis to Codecov for public repositories. When an internal PR is created it will use the Codecov token set in your secrets, and if running from a forked PR, it will use the tokenless setting automatically. For setups not using GitHub Actions see the following example. For private repositories see the following example.

1// vite.config.ts
2import { vitePlugin as remix } from "@remix-run/dev";
3import { defineConfig } from "vite";
4import tsconfigPaths from "vite-tsconfig-paths";
5import { codecovRemixPlugin } from "@codecov/remix-vite-plugin";
6
7export default defineConfig({
8  plugins: [
9    remix(),
10    tsconfigPaths()
11    // Put the Codecov Remix plugin after all other plugins
12    codecovRemixPlugin({
13      enableBundleAnalysis: true,
14      bundleName: "example-remix-bundle",
15      uploadToken: process.env.CODECOV_TOKEN,
16      gitService: "github",
17    }),
18  ],
19});

Public Repo Example - Non-GitHub Actions

This setup is for public repositories that are not using GitHub Actions, this configuration will automatically upload the bundle analysis to Codecov. You will need to configure the it similar to the GitHub Actions example, however you will need to provide a branch override, and ensure that it will pass the correct branch name, and with forks including the fork-owner i.e. fork-owner:branch.

1// vite.config.ts
2import { vitePlugin as remix } from "@remix-run/dev";
3import { defineConfig } from "vite";
4import tsconfigPaths from "vite-tsconfig-paths";
5import { codecovRemixPlugin } from "@codecov/remix-vite-plugin";
6
7export default defineConfig({
8  plugins: [
9    remix(),
10    tsconfigPaths()
11    // Put the Codecov Remix plugin after all other plugins
12    codecovRemixPlugin({
13      enableBundleAnalysis: true,
14      bundleName: "example-remix-bundle",
15      uploadToken: process.env.CODECOV_TOKEN,
16      gitService: "github",
17      uploadOverrides: {
18        branch: "<branch value>",
19      },
20    }),
21  ],
22});

Private Repo Example

This is the required way to use the plugin for private repositories. This configuration will automatically upload the bundle analysis to Codecov.

1// vite.config.ts
2import { vitePlugin as remix } from "@remix-run/dev";
3import { defineConfig } from "vite";
4import tsconfigPaths from "vite-tsconfig-paths";
5import { codecovRemixPlugin } from "@codecov/remix-vite-plugin";
6
7export default defineConfig({
8  plugins: [
9    remix(),
10    tsconfigPaths()
11    // Put the Codecov Remix plugin after all other plugins
12    codecovRemixPlugin({
13      enableBundleAnalysis: true,
14      bundleName: "example-remix-bundle",
15      uploadToken: process.env.CODECOV_TOKEN,
16    }),
17  ],
18});

OIDC Configuration Example

For users with OpenID Connect (OIDC) enabled, setting the uploadToken is not necessary. You can use OIDC with the oidc configuration as following.

1// vite.config.ts
2import { vitePlugin as remix } from "@remix-run/dev";
3import { defineConfig } from "vite";
4import tsconfigPaths from "vite-tsconfig-paths";
5import { codecovRemixPlugin } from "@codecov/remix-vite-plugin";
6
7export default defineConfig({
8  plugins: [
9    remix(),
10    tsconfigPaths()
11    // Put the Codecov Remix plugin after all other plugins
12    codecovRemixPlugin({
13      enableBundleAnalysis: true,
14      bundleName: "example-remix-bundle",
15      oidc: {
16        useGitHubOIDC: true,
17      },
18    }),
19  ],
20});

More information

• Codecov Documentation
• Codecov Feedback
• Sentry Discord