unplugin-cloudflare-tunnel 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/README.md +141 -0
- package/package.json +3 -3
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
# unplugin-cloudflare-tunnel
|
|
2
|
+
|
|
3
|
+
[](https://npm.im/unplugin-cloudflare-tunnel)
|
|
4
|
+
[](https://pkg.pr.new/~/o-az/unplugin-cloudflare-tunnel)
|
|
5
|
+
|
|
6
|
+
A plugin that automatically creates and manages Cloudflare tunnels for local development.
|
|
7
|
+
Available for:
|
|
8
|
+
|
|
9
|
+
- [Vite](https://vite.dev),
|
|
10
|
+
- [Rspack](https://rspack.rs)
|
|
11
|
+
- [Webpack](https://webpack.js.org)
|
|
12
|
+
- [Astro](https://astro.build) <sup>soon</sup>
|
|
13
|
+
- [Farm](https://farmfe.org) <sup>soon</sup>
|
|
14
|
+
- [esbuild](https://esbuild.github.io) <sup>soon</sup>
|
|
15
|
+
- [Rollup](https://rollupjs.org) <sup>soon</sup>
|
|
16
|
+
- [Rolldown](https://rolldown.rs) <sup>soon</sup>
|
|
17
|
+
|
|
18
|
+
> [!NOTE]
|
|
19
|
+
> This is under active development.
|
|
20
|
+
> If you have any suggestions, I'm all ears, please open an issue.
|
|
21
|
+
|
|
22
|
+
## Install
|
|
23
|
+
|
|
24
|
+
unplugin-cloudflare-tunnel
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm add unplugin-cloudflare-tunnel
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Usage
|
|
31
|
+
|
|
32
|
+
<details>
|
|
33
|
+
<summary>Vite</summary><br>
|
|
34
|
+
|
|
35
|
+
```ts
|
|
36
|
+
// vite.config.ts
|
|
37
|
+
import CloudflareTunnel from 'unplugin-cloudflare-tunnel/vite'
|
|
38
|
+
|
|
39
|
+
export default defineConfig({
|
|
40
|
+
plugins: [
|
|
41
|
+
CloudflareTunnel(),
|
|
42
|
+
],
|
|
43
|
+
})
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Example in [./example/vite.config.ts](../example/vite.config.ts): `bun --filter example dev:vite`
|
|
47
|
+
|
|
48
|
+
<br></details>
|
|
49
|
+
|
|
50
|
+
<details>
|
|
51
|
+
<summary>Rspack</summary><br>
|
|
52
|
+
|
|
53
|
+
```ts
|
|
54
|
+
// rspack.config.mjs
|
|
55
|
+
import CloudflareTunnel from 'unplugin-cloudflare-tunnel/rspack'
|
|
56
|
+
|
|
57
|
+
export default {
|
|
58
|
+
/* ... */
|
|
59
|
+
plugins: [
|
|
60
|
+
CloudflareTunnel(),
|
|
61
|
+
]
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
Example in [./example/rspack.config.ts](../example/rspack.config.ts): `bun --filter example dev:rspack`
|
|
66
|
+
|
|
67
|
+
<br></details>
|
|
68
|
+
|
|
69
|
+
<details>
|
|
70
|
+
<summary>Webpack</summary><br>
|
|
71
|
+
|
|
72
|
+
```ts
|
|
73
|
+
// webpack.config.js
|
|
74
|
+
module.exports = {
|
|
75
|
+
/* ... */
|
|
76
|
+
plugins: [
|
|
77
|
+
require('unplugin-cloudflare-tunnel/webpack')({
|
|
78
|
+
CloudflareTunnel(),
|
|
79
|
+
]
|
|
80
|
+
}
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
Example in [./example/webpack.config.ts](../example/webpack.config.ts): `bun --filter example dev:webpack`
|
|
84
|
+
|
|
85
|
+
<br></details>
|
|
86
|
+
|
|
87
|
+
## Virtual Module: Access Tunnel URL
|
|
88
|
+
|
|
89
|
+
> [!NOTE]
|
|
90
|
+
> This feature is only available in Vite and Vite-based frameworks (i.e., Astro)
|
|
91
|
+
|
|
92
|
+
The plugin provides a virtual module that allows you to access the tunnel URL in your application code during development. This is useful for:
|
|
93
|
+
|
|
94
|
+
- Displaying the tunnel URL in your UI
|
|
95
|
+
- Sharing the URL with users
|
|
96
|
+
- Debugging and logging
|
|
97
|
+
- Building features that need the public URL
|
|
98
|
+
|
|
99
|
+
### Usage
|
|
100
|
+
|
|
101
|
+
```typescript
|
|
102
|
+
import { getTunnelUrl } from 'virtual:unplugin-cloudflare-tunnel'
|
|
103
|
+
|
|
104
|
+
// Get the current tunnel URL
|
|
105
|
+
const tunnelUrl = getTunnelUrl()
|
|
106
|
+
console.log('Public tunnel URL:', tunnelUrl)
|
|
107
|
+
|
|
108
|
+
// Example: Copy tunnel URL to clipboard
|
|
109
|
+
const shareButton = document.getElementById('share')
|
|
110
|
+
shareButton.onclick = () => {
|
|
111
|
+
navigator.clipboard.writeText(getTunnelUrl())
|
|
112
|
+
alert('Tunnel URL copied!')
|
|
113
|
+
}
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### TypeScript Support
|
|
117
|
+
|
|
118
|
+
To get TypeScript support for the virtual module, add a reference to the types:
|
|
119
|
+
|
|
120
|
+
```typescript
|
|
121
|
+
// In your tsconfig.json or a .d.ts file
|
|
122
|
+
/// <reference types="unplugin-cloudflare-tunnel/virtual" />
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
Or create a `virtual.d.ts` file in your project:
|
|
126
|
+
|
|
127
|
+
```typescript
|
|
128
|
+
/// <reference types="unplugin-cloudflare-tunnel/virtual" />
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### Return Value
|
|
132
|
+
|
|
133
|
+
- **Quick tunnel mode**: Returns a random URL like `https://abc-123.trycloudflare.com`
|
|
134
|
+
- **Named tunnel mode**: Returns your custom domain URL like `https://dev.example.com`
|
|
135
|
+
- **Plugin disabled**: Returns an empty string `""`
|
|
136
|
+
|
|
137
|
+
### Notes
|
|
138
|
+
|
|
139
|
+
- The virtual module is only available during development mode
|
|
140
|
+
- In production builds, the virtual module will not be available
|
|
141
|
+
- The URL is automatically updated if the port changes or tunnel restarts
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "unplugin-cloudflare-tunnel",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"description": "A plugin that automatically creates and manages Cloudflare tunnels for local development",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"imports": {
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
"files": [
|
|
11
11
|
"dist",
|
|
12
12
|
"LICENSE",
|
|
13
|
-
"
|
|
14
|
-
"
|
|
13
|
+
"package.json",
|
|
14
|
+
"./.github/README.md"
|
|
15
15
|
],
|
|
16
16
|
"main": "./dist/index.mjs",
|
|
17
17
|
"module": "./dist/index.mjs",
|