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

Using npm

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

Using yarn

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

Using pnpm

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

Usage

// 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.