XConViteProxy 1.0.31

XCon Vite Proxy

ASP.NET Core middleware for proxying Vite dev server requests in development mode with automatic Vite server management.

Installation

dotnet add package XConViteProxy

Usage

In your Program.cs:

using XCons.ViteProxy;

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

// Add XCon Vite Proxy middleware (only works in Development environment)
// This automatically starts your Vite dev server!
app.UseXConViteProxy(app.Environment);

// Or with custom Vite server URL
app.UseXConViteProxy(app.Environment, "http://localhost:5173");

app.Run();

Configuration

The middleware automatically:

1. Reads package.json to find the dev script
2. Extracts the config file path from the dev script
3. Reads the Vite config file to find the root path
4. Automatically starts the Vite dev server with npm run dev
5. Proxies requests to that root folder
6. Stops the Vite server when your application exits

Example:

If your package.json contains:

{
  "scripts": {
    "dev": "vite --config vite.config.dev.js"
  }
}

And your vite.config.dev.js contains:

export default defineConfig({
  root: path.resolve(__dirname, 'scripts'),
  // ...
});

The middleware will:

• Run npm run dev automatically
• Proxy requests to /scripts/*
• Show Vite output in your console with [Vite] prefix

Automatic Proxying

The middleware proxies requests when:

• Request path starts with the detected Vite root folder (e.g., /scripts)
• Request path starts with /@vite, /@fs, /node_modules, or /@id
• Request path ends with .ts, .tsx, .jsx, .js, .css, or .vue

Default Vite server URL: http://localhost:4201

You can customize it by passing the URL as second parameter:

app.UseXConViteProxy(app.Environment, "http://localhost:5173");

Features

• ✅ Works only in Development environment
• ✅ Automatically starts Vite dev server with npm run dev
• ✅ Automatically stops Vite when application exits
• ✅ Automatic Vite root detection from config files
• ✅ Vite output visible in console
• ✅ Automatic CORS headers
• ✅ Proper error handling
• ✅ Supports all Vite file types and special paths
• ✅ Zero manual Vite server management needed

How It Works

In development mode, this middleware:

1. Parses your package.json to find the Vite config file
2. Reads the Vite config to determine the root folder
3. Starts Vite dev server by running npm run dev
4. Intercepts requests for Vite assets and proxies them to your running Vite dev server
5. Gracefully stops Vite when your application shuts down

This allows you to:

• Just press F5 in Visual Studio - Vite starts automatically!
• Use Vite's HMR (Hot Module Replacement)
• Benefit from Vite's fast refresh
• Develop your frontend and backend together seamlessly
• No need to manually run npm run dev in a separate terminal

Requirements

• .NET 8.0 or higher
• Node.js and npm installed
• package.json in project root with a dev script
• Vite configuration file

Console Output

When running, you'll see Vite's output in your application console:

XCon Vite Proxy: Starting Vite dev server...
XCon Vite Proxy: Vite dev server started successfully
XCon Vite Proxy: Using Vite root path: /scripts
[Vite] VITE v5.0.0  ready in 500 ms
[Vite] ➜  Local:   http://localhost:4201/
[Vite] ➜  Network: use --host to expose

License

MIT

Made with ❤️ by XCon Studio Team