https://github.com/zcf0508/unplugin-https-reverse-proxy
👻 Add a reverse proxy for your dev service, support `https`.
https://github.com/zcf0508/unplugin-https-reverse-proxy
nuxt react rebuild repack unplugin vite vue webpack
Last synced: 7 days ago
JSON representation
👻 Add a reverse proxy for your dev service, support `https`.
- Host: GitHub
- URL: https://github.com/zcf0508/unplugin-https-reverse-proxy
- Owner: zcf0508
- License: mit
- Created: 2023-11-15T08:42:48.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-21T08:38:41.000Z (8 months ago)
- Last Synced: 2025-06-16T16:12:34.905Z (7 months ago)
- Topics: nuxt, react, rebuild, repack, unplugin, vite, vue, webpack
- Language: TypeScript
- Homepage:
- Size: 1.8 MB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# unplugin-https-reverse-proxy
[](https://www.npmjs.com/package/unplugin-https-reverse-proxy)
[](https://deepwiki.com/zcf0508/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
#.env.local
UHRP_CADDY_PATH=~/tmp/.uhrp
```
```bash
npm i unplugin-https-reverse-proxy --save-dev
```
```ts
interface Options {
/** default: true */
enable?: boolean
/** target hostname */
target: string
/** default: false */
showCaddyLog?: boolean
/** default: false */
https?: boolean
}
```
Vite
```ts
// vite.config.ts
import HttpsReverseProxy from 'unplugin-https-reverse-proxy/vite'
export default defineConfig({
plugins: [
HttpsReverseProxy({ /* options */ }),
],
})
```
Example: [`playground/`](./playground/)
Webpack 5
```js
// webpack.config.js
/** @type {Parameters[0]} */
const reverseProxyOptions = {
enable: false,
target: 'xxx',
https: false,
}
module.exports = {
/* ... */
devServer: {
client: {
// ↓ for HMR
webSocketURL: {
...(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
```js
// webpack.config.js
/** @type {Parameters[0]} */
const reverseProxyOptions = {
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
```js
// rspack.config.js
/** @type {Parameters[0]} */
const reverseProxyOptions = {
enable: false,
target: 'xxx',
https: false,
}
module.exports = {
/* ... */
devServer: {
client: {
// ↓ for HMR
webSocketURL: {
...(reverseProxyOptions.enable
? {
hostname: reverseProxyOptions.target,
}
: {}),
...(reverseProxyOptions.enable && reverseProxyOptions.https
? {
protocol: 'wss',
port: 443,
}
: {})
}
},
},
plugins: [
require('unplugin-https-reverse-proxy/rspack')(reverseProxyOptions)
]
}
```
Rsbuild
```js
// rsbuild.config.js
/** @type {Parameters[0]} */
const reverseProxyOptions = {
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
```js
// nuxt.config.js
export default defineNuxtConfig({
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.
```json
// package.json
{
"scripts": {
"dev": "nuxt dev --fork=false"
}
}
```
Vue CLI 5
```js
// vue.config.js
/** @type {Parameters[0]} */
const reverseProxyOptions = {
enable: false,
target: 'xxx',
https: false,
}
module.exports = {
devServer: {
client: {
// ↓ for HMR
webSocketURL: {
...(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
```js
// vue.config.js
/** @type {Parameters[0]} */
const reverseProxyOptions = {
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](https://github.com/zcf0508/unplugin-https-reverse-proxy/blob/v1.0.0/src/caddy/constants.ts#L17).
## Usage
```bash
# 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](https://caddyserver.com/docs/automatic-https#ca-root).