Vite Plugin

Palette's Vite plugin uploads source maps to Palette.

Installation

npm

npm install @palette.dev/plugin-vite

pnpm

pnpm install @palette.dev/plugin-vite

yarn

yarn add @palette.dev/plugin-vite

Usage

1. Update vite config

Update your Vite config's plugins and build configs:

Get your asset key at https://palette.dev/[your-username]/[your-project]/settings

vite.config.ts

import path from "path";
import { defineConfig } from "vite";
import palette from "@palette.dev/plugin-vite";

export default defineConfig({
  plugins: [
    // Add palette plugin
    palette({
      key: process.env.PALETTE_ASSET_KEY,
      outputPath: "dist/assets",
    }),
  ],
  build: {
    // Enable source maps
    sourcemap: true,
    rollupOptions: {
      output: {
        // Set source maps paths relative to the current working directory
        sourcemapPathTransform: (relativeSourcePath, sourcemapPath) =>
          path.relative(process.cwd(), path.resolve(path.dirname(sourcemapPath), relativeSourcePath)),
      },
    },
  },
});

2. Add entrypoint

Import virtual:@palette.dev/plugin-vite/init in your app's entrypoint (e.g. main.js):

main.ts

import "virtual:@palette.dev/plugin-vite/init"; // import before other imports
import { init } from "@palette.dev/...";

init({
  key: "...",
  plugins: [
    // ...
  ],
});

API

Property	Description	Type	Default
key	Palette asset key	string	(required)
version	Version of your app	string	git commit hash
release	Mark version as release (see release docs)	boolean	if the current git branch is main or master or false
outputPath	Directory to search for source maps	string