vite-plugin-http2-proxy

Run an HTTP2 proxy in development mode with Vite. Works great when paired with vite-plugin-mkcert.

Why would I use this?

When using Vite's built-in proxy and https: true, all requests are downgraded to HTTP1.1. See this issue for discussion. This plugin is useful when you need to proxy requests to an external API in development mode and you want to use https and/or HTTP2.

Use this with vite-plugin-mkcert for seamless SSL certificate generation and use of https with proxy usage in development.

Install

$3

``zsh
npm install @cpsoinos/vite-plugin-http2-proxy --save-dev
`

$3

`zsh
yarn add @cpsoinos/vite-plugin-http2-proxy -D
`

$3

`zsh
pnpm add @cpsoinos/vite-plugin-http2-proxy -D
`

Usage

`ts
// vite.config.ts

import { defineConfig } from 'vite'
import http2Proxy from '@cpsoinos/vite-plugin-http2-proxy'
import mkcert from 'vite-plugin-mkcert' // optional - use to generate SSL certificates and use https in development

export default defineConfig(({ mode }) => {
return {
plugins: [
// ... other plugins
mkcert(), // optional
http2Proxy({ quiet: true }), // optional -- suppress error logging
],
server: {
// optional - only in development mode
...(mode === 'development' && {
proxy: {
'/api': {
target: 'https://api.example.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''), // optional - remove /api from request path
},
},
}),
},
}
})
`

Accreditations

Adapted from a gist shared by @xfournet in this issue comment.

This plugin uses http2-proxy` under the hood. See the http2-proxy package for more information.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2024 Corey Psoinos.

This project is MIT licensed.