Vite-Shield

1.0.0 verified Mon Apr 27 auth: no javascript

Vite-Shield is a zero-configuration CLI tool that automatically adds comprehensive security headers to Vite/React projects. Version 1.0.0 integrates security headers into Vite's dev and preview servers, generates a production-ready Express.js server with helmet-style headers, and creates an Nginx configuration template. Unlike manual header setup or using helmet separately, Vite-Shield provides a one-command solution using AST-based transformations to safely modify vite.config.ts/js without breaking existing setups. It applies headers like Strict-Transport-Security, CSP, X-Frame-Options, and more across all environments.

Common errors

error Command 'vite-shield' not found ↓

cause vite-shield not installed globally or path not set

fix

Use npx vite-shield or npm install -g vite-shield

error Cannot find module '/path/to/project/vite.config.ts' ↓

cause Command not run from the root of a Vite project

fix

cd to the directory containing vite.config.ts or vite.config.js before running

error error: unknown option '--something' ↓

cause vite-shield has no CLI options; extra flags cause errors

fix

Run vite-shield with no arguments

Warnings

gotcha Running vite-shield overwrites any existing security headers in vite.config.ts/js without merging ↓

fix Manually back up your vite.config before running vite-shield

gotcha vite-shield modifies vite.config.ts/js using AST; if your config uses unusual syntax or plugins that generate dynamic headers, the tool may produce invalid config ↓

fix Review the generated config and manually adjust if needed

gotcha The generated server.js uses ESM imports (import express from 'express') which requires "type": "module" in package.json or .mjs extension ↓

fix Add "type": "module" to package.json or rename server.js to server.mjs

gotcha The generated nginx.conf uses add_header directives that may conflict with existing server blocks if not placed in the correct context ↓

fix Ensure the add_header directives are inside the server block and not duplicated

Install

npm install vite-shield

yarn add vite-shield

pnpm add vite-shield

Imports

vite-shield
wrong
```
import viteShield from 'vite-shield'
```
correct
```
npx vite-shield
```
CLI tool only, no programmatic API available

vite.config

wrong

module.exports = { server: { headers: {} } }

correct

export default defineConfig({ server: { headers: {} } })

Vite config must use ESM export syntax

Quickstart

Shows how to install and run vite-shield via global install or npx, then start the generated Express server.

# Navigate to your Vite/React project
cd my-vite-project

# Install vite-shield globally or use npx
npm install -g vite-shield
vite-shield

# Alternatively, with npx (no install):
npx vite-shield

# After running, vite.config.ts/js is updated with security headers.
# A production server.js and nginx.conf are also created.
# To start the production server:
npm install --save-dev express
node server.js