unplugin-https-reverse-proxy

A plugin for https reverse proxy, support vite、webpack and rspack.

Install

Support set caddy file path by environment variable UHRP_CADDY_PATH, default is system cache folder.

#.env.localUHRP_CADDY_PATH=~/tmp/.uhrp

npm i unplugin-https-reverse-proxy --save-dev

interfaceOptions{/** default: true */enable?: boolean/** target hostname */target: string/** default: false */showCaddyLog?: boolean/** default: false */https?: boolean}

Vite

// vite.config.tsimportHttpsReverseProxyfrom'unplugin-https-reverse-proxy/vite'exportdefaultdefineConfig({plugins: [HttpsReverseProxy({/* options */}),],})

Example: playground/

Webpack 5

// webpack.config.js/** @type {Parameters<import('unplugin-https-reverse-proxy/webpack')['default']>[0]} */constreverseProxyOptions={enable: false,target: 'xxx',https: false,}module.exports={/* ... */devServer: {client: {// ↓ for HMRwebSocketURL: {
...(reverseProxyOptions.enable
? {hostname: reverseProxyOptions.target,}
: {}),
...(reverseProxyOptions.enable&&reverseProxyOptions.https
? {protocol: 'wss',port: 443,}
: {})}},setupExitSignals: true,allowedHosts: 'all',},plugins: [require('unplugin-https-reverse-proxy/webpack')(reverseProxyOptions)]}

Webpack 4

// webpack.config.js/** @type {Parameters<import('unplugin-https-reverse-proxy/webpack')['default']>[0]} */constreverseProxyOptions={enable: false,target: 'xxx',// https: false, // not support yet}module.exports={/* ... */devServer: {host: '0.0.0.0',disableHostCheck: true,},plugins: [require('unplugin-https-reverse-proxy/webpack')(reverseProxyOptions)]}

Rspack

// rspack.config.js/** @type {Parameters<import('unplugin-https-reverse-proxy/webpack')['default']>[0]} */constreverseProxyOptions={enable: false,target: 'xxx',https: false,}module.exports={/* ... */devServer: {client: {// ↓ for HMRwebSocketURL: {
...(reverseProxyOptions.enable
? {hostname: reverseProxyOptions.target,}
: {}),
...(reverseProxyOptions.enable&&reverseProxyOptions.https
? {protocol: 'wss',port: 443,}
: {})}},},plugins: [require('unplugin-https-reverse-proxy/rspack')(reverseProxyOptions)]}

Rsbuild

// rsbuild.config.js/** @type {Parameters<import('unplugin-https-reverse-proxy/webpack')['default']>[0]} */constreverseProxyOptions={enable: false,target: 'xxx',https: false,healthCheck: true,}module.exports={/* ... */dev: {client: {// ↓ for HMR
...(reverseProxyOptions.enable
? {host: reverseProxyOptions.target,}
: {}),
...(reverseProxyOptions.enable&&reverseProxyOptions.https
? {protocol: 'wss',port: '443',}
: {})},},tools: {rspack: {plugins: [require('unplugin-https-reverse-proxy/rspack')(reverseProxyOptions)]},},}

Nuxt

// nuxt.config.jsexportdefaultdefineNuxtConfig({modules: [['unplugin-https-reverse-proxy/nuxt',{/* options */healthCheck: false,// important for nuxt}],],})

!important: You need to update the nuxt dev script by adding --fork=false to enable host restoration.

// package.json
{
"scripts": {
"dev": "nuxt dev --fork=false"
}
}

Vue CLI 5

// vue.config.js/** @type {Parameters<import('unplugin-https-reverse-proxy/webpack')['default']>[0]} */constreverseProxyOptions={enable: false,target: 'xxx',https: false,}module.exports={devServer: {client: {// ↓ for HMRwebSocketURL: {
...(reverseProxyOptions.enable
? {hostname: reverseProxyOptions.target,}
: {}),
...(reverseProxyOptions.enable&&reverseProxyOptions.https
? {protocol: 'wss',port: 443,}
: {})}},setupExitSignals: true,allowedHosts: 'all',},configureWebpack: {plugins: [require('unplugin-https-reverse-proxy/webpack')(reverseProxyOptions),],},}

Vue CLI 4

// vue.config.js/** @type {Parameters<import('unplugin-https-reverse-proxy/webpack')['default']>[0]} */constreverseProxyOptions={enable: false,target: 'xxx',// https: false, // not support yet}module.exports={devServer: {host: '0.0.0.0',disableHostCheck: true,},configureWebpack: {plugins: [require('unplugin-https-reverse-proxy/webpack')(reverseProxyOptions),],},}

NOTICE!

You need delete caddy executable file after you updated to ^2.0.0. The default path is $TMPDIR/caddy, and if you set UHRP_CADDY_PATH, it will be in the path you set.

Please check caddy path.

Usage

# macOS
sudo -E npm run dev # your dev script# ^ `-E` is important# windows# use powershell as administrator
npm run dev # your dev script

If your broswer shows a not trusted certificate warning, please check the keychain.

More info, you can check caddy about CA Root.