Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

OpenAEC-Foundation/vite-impl-backend-integration

Name: vite-impl-backend-integration
Author: OpenAEC-Foundation

.claude/skills/vite/vite-impl/vite-impl-backend-integration/SKILL.md

npx skillsauth add OpenAEC-Foundation/OpenAEC-Workspace-Composer vite-impl-backend-integration

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

vite-impl-backend-integration

Quick Reference

When This Skill Applies

Use this skill when:

Integrating Vite with a backend framework (Django, Laravel, Rails, Express, ASP.NET, etc.)
Rendering Vite-built assets from server-side templates
Setting up dev/production HTML serving for a non-SPA architecture
Reading .vite/manifest.json to resolve hashed asset paths

Architecture Overview

| Concern | Development | Production | |---------|------------|------------| | Asset serving | Vite dev server (localhost:5173) | Static files from dist/ | | HTML generation | Backend injects Vite client + entry scripts | Backend reads manifest.json, renders tags | | HMR | Automatic via @vite/client | N/A | | CSS | Injected by Vite dev server | Extracted as separate files | | Entry resolution | Direct source path | Hashed filename from manifest |

Critical Warnings

NEVER omit import 'vite/modulepreload-polyfill' from your entry point -- without it, <link rel="modulepreload"> tags will not work in browsers that lack native support.

NEVER hardcode hashed filenames in production templates -- ALWAYS read .vite/manifest.json at runtime or build time. Hashed names change on every build.

NEVER serve the Vite dev server scripts in production -- ALWAYS use environment detection to switch between dev mode HTML and production manifest rendering.

NEVER omit the React preamble when using @vitejs/plugin-react with a backend -- HMR will silently fail without it.

ALWAYS set build.manifest: true in vite.config.ts when integrating with a backend framework.

ALWAYS set server.cors to allow your backend origin during development.

ALWAYS specify build.rollupOptions.input (Vite 6/7) or build.rolldownOptions.input (Vite 8+) to define your entry point explicitly.

Configuration

vite.config.ts (Backend Integration)

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    cors: {
      origin: 'http://my-backend.example.com',
    },
  },
  build: {
    manifest: true,
    // Vite 6/7:
    rollupOptions: {
      input: '/path/to/main.js',
    },
    // Vite 8+:
    // rolldownOptions: {
    //   input: '/path/to/main.js',
    // },
  },
})

Entry Point Setup

ALWAYS add the modulepreload polyfill as the first import in your entry file:

// main.js
import 'vite/modulepreload-polyfill'

// Rest of your application code
import './styles/app.css'
import { createApp } from './app'

createApp()

Development Mode

HTML Template (Dev)

In development, your backend template MUST include two scripts pointing to the Vite dev server:

<!-- Backend template: development mode -->
<html>
  <head>
    <!-- No CSS links needed -- Vite injects CSS via JS in dev -->
  </head>
  <body>
    <div id="app"></div>

    <!-- 1. Vite client for HMR -->
    <script type="module" src="http://localhost:5173/@vite/client"></script>

    <!-- 2. Your entry point -->
    <script type="module" src="http://localhost:5173/main.js"></script>
  </body>
</html>

React Preamble (Dev Only)

When using @vitejs/plugin-react, ALWAYS inject the React Refresh preamble BEFORE the Vite client script:

<!-- React preamble: MUST come before @vite/client -->
<script type="module">
  import RefreshRuntime from 'http://localhost:5173/@react-refresh'
  RefreshRuntime.injectIntoGlobalHook(window)
  window.$RefreshReg$ = () => {}
  window.$RefreshSig$ = () => (type) => type
  window.__vite_plugin_react_preamble_installed__ = true
</script>

<!-- Then Vite client -->
<script type="module" src="http://localhost:5173/@vite/client"></script>

<!-- Then entry -->
<script type="module" src="http://localhost:5173/main.js"></script>

Production Mode

Manifest Location

After running vite build, the manifest file is located at:

dist/.vite/manifest.json

ManifestChunk Properties

| Property | Type | Description | |----------|------|-------------| | src | string | Original source file path | | file | string | Hashed output file path | | css | string[] | CSS files associated with this chunk | | assets | string[] | Non-JS/CSS assets imported by this chunk | | isEntry | boolean | Whether this is an entry point | | name | string | Short name of the chunk | | isDynamicEntry | boolean | Whether this is a dynamic import entry | | imports | string[] | Keys of statically imported chunks | | dynamicImports | string[] | Keys of dynamically imported chunks |

Rendering Order (CRITICAL)

For each entry point, ALWAYS render tags in this exact order:

<link rel="stylesheet"> for the entry chunk's own CSS files
<link rel="stylesheet"> for all recursively imported chunks' CSS files
<script type="module"> for the entry chunk's JS file
<link rel="modulepreload"> for all recursively imported JS chunks

<!-- 1. Entry CSS -->
<link rel="stylesheet" href="/dist/assets/main-5UjPuW-k.css" />
<!-- 2. Imported chunks' CSS (recursive) -->
<link rel="stylesheet" href="/dist/assets/shared-ChJ_j-JJ.css" />
<!-- 3. Entry JS -->
<script type="module" src="/dist/assets/main-BRBmoGS9.js"></script>
<!-- 4. Modulepreload for imported JS -->
<link rel="modulepreload" href="/dist/assets/shared-B7PI925R.js" />

Manifest Traversal Algorithm

Use this recursive algorithm to collect all imported chunks (prevents duplicates via seen Set):

import type { Manifest, ManifestChunk } from 'vite'

export default function importedChunks(
  manifest: Manifest,
  name: string,
): ManifestChunk[] {
  const seen = new Set<string>()

  function getImportedChunks(chunk: ManifestChunk): ManifestChunk[] {
    const chunks: ManifestChunk[] = []
    for (const file of chunk.imports ?? []) {
      const importee = manifest[file]
      if (seen.has(file)) continue
      seen.add(file)
      chunks.push(...getImportedChunks(importee))
      chunks.push(importee)
    }
    return chunks
  }

  return getImportedChunks(manifest[name])
}

Dev vs Production Switching

Decision Tree

Is this a development environment?
├─ YES → Inject Vite dev server scripts into HTML
│        ├─ Using React? → Add React preamble FIRST
│        ├─ Add @vite/client script
│        └─ Add entry point script
└─ NO  → Read .vite/manifest.json
         ├─ Look up entry chunk by source path
         ├─ Collect CSS from entry + recursive imports
         ├─ Render <link rel="stylesheet"> tags
         ├─ Render <script type="module"> for entry
         └─ Render <link rel="modulepreload"> for imports

Server-Side Switching Pattern

# Example: Python/Django-style pseudocode
def vite_tags(entry: str) -> str:
    if settings.DEBUG:
        return dev_tags(entry)
    else:
        return production_tags(entry)

def dev_tags(entry: str) -> str:
    return f'''
        <script type="module" src="http://localhost:5173/@vite/client"></script>
        <script type="module" src="http://localhost:5173/{entry}"></script>
    '''

def production_tags(entry: str) -> str:
    manifest = load_manifest('dist/.vite/manifest.json')
    chunk = manifest[entry]
    imported = get_imported_chunks(manifest, entry)
    tags = []
    # 1. Entry CSS
    for css in chunk.get('css', []):
        tags.append(f'<link rel="stylesheet" href="/dist/{css}" />')
    # 2. Imported CSS
    for imp in imported:
        for css in imp.get('css', []):
            tags.append(f'<link rel="stylesheet" href="/dist/{css}" />')
    # 3. Entry JS
    tags.append(f'<script type="module" src="/dist/{chunk["file"]}"></script>')
    # 4. Modulepreload
    for imp in imported:
        tags.append(f'<link rel="modulepreload" href="/dist/{imp["file"]}" />')
    return '\n'.join(tags)

Reference Links

references/manifest-reference.md -- ManifestChunk interface, manifest.json structure, traversal algorithm details
references/examples.md -- Complete dev HTML, production rendering, React preamble examples
references/anti-patterns.md -- Common backend integration mistakes and how to avoid them

Official Sources

https://vite.dev/guide/backend-integration.html
https://vite.dev/config/build-options.html#build-manifest
https://vite.dev/config/server-options.html#server-cors

OpenAEC-Foundation/vite-impl-backend-integration

.claude/skills/vite/vite-impl/vite-impl-backend-integration/SKILL.md

Use when integrating Vite with a backend framework, rendering Vite assets from server-side templates, or setting up dev/production HTML serving. Prevents incorrect manifest.json traversal and missing CSS chunk resolution in production. Covers build.manifest configuration, .vite/manifest.json structure, ManifestChunk properties, dev mode HTML setup, production rendering, CSS/JS chunk resolution, and modulepreload polyfill. Keywords: backend integration, manifest.json, ManifestChunk, Django, Laravel, Rails, modulepreload.

3 stars

development

Updated Apr 16, 2026

$ install --global

skillsauth

npx skillsauth add OpenAEC-Foundation/OpenAEC-Workspace-Composer vite-impl-backend-integration

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: Apr 16, 2026, 2:34 AM52.9s4 files scanned

SKILL.md

name:: vite-impl-backend-integration
description:: >
Keywords:: backend integration, manifest.json, ManifestChunk, Django, Laravel, Rails, modulepreload.
license:: MIT
compatibility:: Designed for Claude Code. Requires Vite 6.x, 7.x, or 8.x.
author:: OpenAEC-Foundation
version:: 1.0

vite-impl-backend-integration

Quick Reference

When This Skill Applies

Use this skill when:

Integrating Vite with a backend framework (Django, Laravel, Rails, Express, ASP.NET, etc.)
Rendering Vite-built assets from server-side templates
Setting up dev/production HTML serving for a non-SPA architecture
Reading .vite/manifest.json to resolve hashed asset paths

Architecture Overview

Critical Warnings

NEVER omit import 'vite/modulepreload-polyfill' from your entry point -- without it, <link rel="modulepreload"> tags will not work in browsers that lack native support.

NEVER hardcode hashed filenames in production templates -- ALWAYS read .vite/manifest.json at runtime or build time. Hashed names change on every build.

NEVER serve the Vite dev server scripts in production -- ALWAYS use environment detection to switch between dev mode HTML and production manifest rendering.

NEVER omit the React preamble when using @vitejs/plugin-react with a backend -- HMR will silently fail without it.

ALWAYS set build.manifest: true in vite.config.ts when integrating with a backend framework.

ALWAYS set server.cors to allow your backend origin during development.

ALWAYS specify build.rollupOptions.input (Vite 6/7) or build.rolldownOptions.input (Vite 8+) to define your entry point explicitly.

Configuration

vite.config.ts (Backend Integration)

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    cors: {
      origin: 'http://my-backend.example.com',
    },
  },
  build: {
    manifest: true,
    // Vite 6/7:
    rollupOptions: {
      input: '/path/to/main.js',
    },
    // Vite 8+:
    // rolldownOptions: {
    //   input: '/path/to/main.js',
    // },
  },
})

Entry Point Setup

ALWAYS add the modulepreload polyfill as the first import in your entry file:

// main.js
import 'vite/modulepreload-polyfill'

// Rest of your application code
import './styles/app.css'
import { createApp } from './app'

createApp()

Development Mode

HTML Template (Dev)

In development, your backend template MUST include two scripts pointing to the Vite dev server:

<!-- Backend template: development mode -->
<html>
  <head>
    <!-- No CSS links needed -- Vite injects CSS via JS in dev -->
  </head>
  <body>
    <div id="app"></div>

    <!-- 1. Vite client for HMR -->
    <script type="module" src="http://localhost:5173/@vite/client"></script>

    <!-- 2. Your entry point -->
    <script type="module" src="http://localhost:5173/main.js"></script>
  </body>
</html>

React Preamble (Dev Only)

When using @vitejs/plugin-react, ALWAYS inject the React Refresh preamble BEFORE the Vite client script:

<!-- React preamble: MUST come before @vite/client -->
<script type="module">
  import RefreshRuntime from 'http://localhost:5173/@react-refresh'
  RefreshRuntime.injectIntoGlobalHook(window)
  window.$RefreshReg$ = () => {}
  window.$RefreshSig$ = () => (type) => type
  window.__vite_plugin_react_preamble_installed__ = true
</script>

<!-- Then Vite client -->
<script type="module" src="http://localhost:5173/@vite/client"></script>

<!-- Then entry -->
<script type="module" src="http://localhost:5173/main.js"></script>

Production Mode

Manifest Location

After running vite build, the manifest file is located at:

dist/.vite/manifest.json

ManifestChunk Properties

Rendering Order (CRITICAL)

For each entry point, ALWAYS render tags in this exact order:

<link rel="stylesheet"> for the entry chunk's own CSS files
<link rel="stylesheet"> for all recursively imported chunks' CSS files
<script type="module"> for the entry chunk's JS file
<link rel="modulepreload"> for all recursively imported JS chunks

<!-- 1. Entry CSS -->
<link rel="stylesheet" href="/dist/assets/main-5UjPuW-k.css" />
<!-- 2. Imported chunks' CSS (recursive) -->
<link rel="stylesheet" href="/dist/assets/shared-ChJ_j-JJ.css" />
<!-- 3. Entry JS -->
<script type="module" src="/dist/assets/main-BRBmoGS9.js"></script>
<!-- 4. Modulepreload for imported JS -->
<link rel="modulepreload" href="/dist/assets/shared-B7PI925R.js" />

Manifest Traversal Algorithm

Use this recursive algorithm to collect all imported chunks (prevents duplicates via seen Set):

import type { Manifest, ManifestChunk } from 'vite'

export default function importedChunks(
  manifest: Manifest,
  name: string,
): ManifestChunk[] {
  const seen = new Set<string>()

  function getImportedChunks(chunk: ManifestChunk): ManifestChunk[] {
    const chunks: ManifestChunk[] = []
    for (const file of chunk.imports ?? []) {
      const importee = manifest[file]
      if (seen.has(file)) continue
      seen.add(file)
      chunks.push(...getImportedChunks(importee))
      chunks.push(importee)
    }
    return chunks
  }

  return getImportedChunks(manifest[name])
}

Dev vs Production Switching

Decision Tree

Is this a development environment?
├─ YES → Inject Vite dev server scripts into HTML
│        ├─ Using React? → Add React preamble FIRST
│        ├─ Add @vite/client script
│        └─ Add entry point script
└─ NO  → Read .vite/manifest.json
         ├─ Look up entry chunk by source path
         ├─ Collect CSS from entry + recursive imports
         ├─ Render <link rel="stylesheet"> tags
         ├─ Render <script type="module"> for entry
         └─ Render <link rel="modulepreload"> for imports

Server-Side Switching Pattern

# Example: Python/Django-style pseudocode
def vite_tags(entry: str) -> str:
    if settings.DEBUG:
        return dev_tags(entry)
    else:
        return production_tags(entry)

def dev_tags(entry: str) -> str:
    return f'''
        <script type="module" src="http://localhost:5173/@vite/client"></script>
        <script type="module" src="http://localhost:5173/{entry}"></script>
    '''

def production_tags(entry: str) -> str:
    manifest = load_manifest('dist/.vite/manifest.json')
    chunk = manifest[entry]
    imported = get_imported_chunks(manifest, entry)
    tags = []
    # 1. Entry CSS
    for css in chunk.get('css', []):
        tags.append(f'<link rel="stylesheet" href="/dist/{css}" />')
    # 2. Imported CSS
    for imp in imported:
        for css in imp.get('css', []):
            tags.append(f'<link rel="stylesheet" href="/dist/{css}" />')
    # 3. Entry JS
    tags.append(f'<script type="module" src="/dist/{chunk["file"]}"></script>')
    # 4. Modulepreload
    for imp in imported:
        tags.append(f'<link rel="modulepreload" href="/dist/{imp["file"]}" />')
    return '\n'.join(tags)

Reference Links

references/manifest-reference.md -- ManifestChunk interface, manifest.json structure, traversal algorithm details
references/examples.md -- Complete dev HTML, production rendering, React preamble examples
references/anti-patterns.md -- Common backend integration mistakes and how to avoid them

Official Sources

https://vite.dev/guide/backend-integration.html
https://vite.dev/config/build-options.html#build-manifest
https://vite.dev/config/server-options.html#server-cors

Related Skills

OpenAEC-Foundation/vite-errors-dev-server

development

VerifiedTrustedCommunity

Use when encountering dev server startup failures, HMR issues, proxy errors, CORS blocks, or module not found errors during development. Prevents misconfiguring server.hmr behind reverse proxies and forgetting appType: 'custom' in middleware mode. Covers HMR full-reload debugging, proxy configuration, CORS setup, HTTPS certificates, server.fs.strict violations, port conflicts, WebSocket failures, file watcher issues, and middleware mode. Keywords: dev server, HMR, proxy, CORS, HTTPS, WebSocket, port conflict, server.fs.strict, middleware mode, file watcher.

3SKILL.mdUpdated Apr 16, 2026

OpenAEC-Foundation/vite-errors-dev-server

OpenAEC-Foundation/vite-errors-dependency

development

VerifiedTrustedCommunity

Use when encountering pre-bundling errors, dependency resolution failures, stale cache issues, or slow development server startup. Prevents excluding CJS dependencies from pre-bundling (which breaks runtime module resolution) and misconfiguring optimizeDeps. Covers CJS/ESM conversion failures, missing dependency auto-discovery, optimizeDeps configuration, monorepo linked dependencies, cache invalidation, browser cache staleness, and large dependency tree performance. Keywords: pre-bundling, optimizeDeps, CJS, ESM, cache, dependency resolution, monorepo, node_modules/.vite.

3SKILL.mdUpdated Apr 16, 2026

OpenAEC-Foundation/vite-errors-dependency

OpenAEC-Foundation/vite-errors-build

development

VerifiedTrustedCommunity

Use when encountering Vite build failures, chunk size warnings, or version-specific build errors. Prevents the common mistake of using deprecated rollupOptions in v8 or misconfiguring build targets and minifiers. Covers Rolldown/Rollup bundling failures, CSS minification errors, sourcemap problems, library mode build failures, BundleError handling, and asset processing errors. Keywords: build error, Rolldown, chunk size, sourcemap, library mode, minify, BundleError, rollupOptions, build.target.

3SKILL.mdUpdated Apr 16, 2026

OpenAEC-Foundation/vite-errors-build

OpenAEC-Foundation/vite-core-environment-api

tools

VerifiedTrustedCommunity

Use when configuring SSR environments, edge workers, custom environments, or migrating to the Vite 6+ environment model. Prevents using the Environment API on Vite 5 (where it does not exist) and misconfiguring per-environment vs shared plugin scoping. Covers per-environment build and dev settings, EnvironmentOptions interface, custom environment providers, shared vs per-environment plugins, configuration inheritance, and migration from Vite 5 implicit environments. Keywords: vite, environment api, vite 6, SSR, edge workers, per-environment config, providers.

3SKILL.mdUpdated Apr 16, 2026

OpenAEC-Foundation/vite-core-environment-api

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/OpenAEC-Foundation/OpenAEC-Workspace-Composer.git

# Copy into Claude Code skills folder (global)
cp -r OpenAEC-Workspace-Composer/.claude/skills/vite/vite-impl/vite-impl-backend-integration ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

OpenAEC-Foundation/OpenAEC-Workspace-Composer

3 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT