skills.rest
freedomw1987
freedomw1987COMMUNITY
Explore all skills by this author →
𝕏@davidaasmGitHub

vite-static-asset-proxy-debug

Diagnose Vite dev server proxy misconfigurations returning HTML for static assets.

2|Updated May 10, 2026
Search Tags:#debugging#frontend#dev server#environment variables#vite#static assets#proxy
One-click install
npx skills add https://github.com/freedomw1987/tree_monstor --skill vite-static-asset-proxy-debug
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vite-static-asset-proxy-debug
Source: https://github.com/freedomw1987/tree_monstor/tree/main/skills/vite-static-asset-proxy-debug
Command: npx skills add https://github.com/freedomw1987/tree_monstor --skill vite-static-asset-proxy-debug

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the common issue where backend-served static assets (such as images and files) load correctly in production but return HTML instead of binary content when accessed via a local Vite dev server, breaking inline previews and asset display.

Core Features & Use Cases

  • Proxy Configuration Guidance: Provides the exact Vite config setup to correctly proxy backend static asset paths to the backend service.
  • Env Var Pitfall Fix: Covers the edge case where Vite loads .env.production instead of .env during dev builds, causing incorrect API endpoints in built assets.
  • Verification Steps: Includes simple curl commands to confirm assets are served correctly after fixes.
  • Use Case: For example, if your app's image lightbox works in production but shows broken images in local Vite dev, this Skill guides you through diagnosing the root cause and applying the correct fix.

Quick Start

Use the vite-static-asset-proxy-debug skill to fix the issue where your Vite dev server returns HTML instead of binary content for backend-served static asset paths.

Frequently Asked Questions about vite-static-asset-proxy-debug

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does my Vite dev server return HTML instead of static assets like images?▼

The Vite dev server returns HTML instead of static assets when proxy rules are misconfigured or .env.production overrides API endpoints during local development builds. Correctly configuring Vite server proxy rules for backend static asset paths resolves this issue.

How do I configure Vite proxy rules for backend-served static asset paths?▼

To configure Vite proxy rules, set up exact server proxy mappings in your Vite config to route static asset endpoints to the backend service. This ensures binary content is served correctly during local development instead of the default HTML fallback.

Why is Vite loading .env.production instead of .env during local development?▼

Vite loads .env.production during local development due to environment variable loading edge cases, causing incorrect API endpoints in built assets. You must explicitly pass build-time environment variables to prevent unintended .env.production overrides in dev builds.

How do I verify Vite static asset proxy fixes work correctly?▼

Verify Vite static asset proxy fixes by running simple curl commands against the proxied endpoints. This confirms that the dev server correctly returns expected binary content instead of HTML after applying the configuration changes.

Can I use Vite as a dev server with a separate backend hosting static files?▼

Yes, you can use Vite as a dev server with separate backend services hosting static files. This setup requires proper proxy configuration to ensure assets load correctly in local development and match production behavior.

Related Skills

Explore More Software Engineering Skills→
freedomw1987freedomw1987
2

vite-spa-nginx-deployment

Configure nginx to serve Vite React SPAs with HashRouter and static caching.

Community
Advanced
AnandaAnugrahHandyantoAnandaAnugrahHandyanto

gif-search

Search and download GIFs from the Tenor API using curl and jq.

Community
Intermediate
findinfinitelabsfindinfinitelabs

react-typescript-frontend

Build a type-safe Chuukese React frontend with Mantine UI v8 and Vite.

Community
Intermediate
naviktnavikt
2

sif-server-proxy-api-config

Diagnose server proxy and environment configuration mismatches for API and frontend paths.

Official
Intermediate