@replit/vite-plugin-dev-banner

A Vite plugin that injects a development preview banner on *.replit.dev domains during development. The banner warns users that they're viewing a temporary development preview.

Features

- Development-only: Only injects the banner when running in development mode (vite serve)
- Domain-specific: Only displays on *.replit.dev domains
- Frame-aware: Automatically hides when the app is embedded in an iframe
- Persistent dismissal: Users can close the banner and it stays closed using localStorage
- Responsive design: Adapts to mobile and desktop screens
- Zero production impact: No code is included in production builds

Installation

``bash
npm install @replit/vite-plugin-dev-banner


or


pnpm add @replit/vite-plugin-dev-banner
`

Usage

Add the plugin to your vite.config.ts:

`typescript
import { defineConfig } from 'vite';
import { devBanner } from '@replit/vite-plugin-dev-banner';

export default defineConfig({
plugins: [
...(process.env.NODE_ENV !== "production" &&
process.env.REPL_ID !== undefined
? [
await import("@replit/vite-plugin-dev-banner").then((m) =>
m.devBanner(),
),
]
: []),
// other plugins
],
});
`

That's it! The banner will automatically appear when:
1. Running in development mode (vite dev or vite serve)
2. Accessing the app via a *.replit.dev domain
3. The app is not embedded in an iframe
4. The user hasn't previously dismissed the banner

How it works

The plugin:
1. Serves a banner script at /@vite-plugin-dev-banner/banner-script.js via Vite's dev server
2. Injects a