diff --git a/.vscode/settings.json b/.vscode/settings.json
index 342fed968..35bc79bdd 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,10 +7,10 @@
"editor.defaultFormatter": "vscode.css-language-features"
},
"[javascript]": {
- "editor.defaultFormatter": "vscode.typescript-language-features"
+ "editor.defaultFormatter": "biomejs.biome"
},
"[typescript]": {
- "editor.defaultFormatter": "vscode.typescript-language-features"
+ "editor.defaultFormatter": "biomejs.biome"
},
"[toml]": {
"editor.defaultFormatter": "tombi-toml.tombi"
diff --git a/examples/with-proxy/.gitignore b/examples/with-proxy/.gitignore
new file mode 100644
index 000000000..999729dba
--- /dev/null
+++ b/examples/with-proxy/.gitignore
@@ -0,0 +1,4 @@
+dist
+node_modules
+*.log
+.DS_Store
diff --git a/examples/with-proxy/README.md b/examples/with-proxy/README.md
new file mode 100644
index 000000000..56073b35d
--- /dev/null
+++ b/examples/with-proxy/README.md
@@ -0,0 +1,40 @@
+# with-proxy
+
+Example project demonstrating `devServer.proxy` on the Hono-based dev server.
+
+## Config
+
+See `utoopack.json`: `devServer.proxy` is an array of `ProxyRule`:
+
+- **`/api`** → `https://jsonplaceholder.typicode.com` with `pathRewrite: { "^/api": "" }`
+- **`/placeholder`** and **`/json`** → same target with respective path rewrites
+
+## Run
+
+```bash
+# From repo root
+ut start --workspace with-proxy
+# or
+npx up --workspace with-proxy
+```
+
+Then open the app and use the radio buttons to request `/api/posts/1` or `/placeholder/posts/1`; both are proxied to JSONPlaceholder without CORS.
+
+## proxyFromObject (JS/TS config)
+
+In a JS/TS config file you can use `proxyFromObject` from `@utoo/pack-shared` to build rules from an object:
+
+```ts
+import { proxyFromObject } from "@utoo/pack-shared";
+
+export default {
+ devServer: {
+ proxy: [
+ ...proxyFromObject({
+ "/api": "http://localhost:3000",
+ "/auth": { target: "http://localhost:5000", changeOrigin: true },
+ }),
+ ],
+ },
+};
+```
diff --git a/examples/with-proxy/index.html b/examples/with-proxy/index.html
new file mode 100644
index 000000000..fdf096699
--- /dev/null
+++ b/examples/with-proxy/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+ devServer.proxy Example – Utoo Pack
+
+
+
+
+
diff --git a/examples/with-proxy/package.json b/examples/with-proxy/package.json
new file mode 100644
index 000000000..ea1dad9d6
--- /dev/null
+++ b/examples/with-proxy/package.json
@@ -0,0 +1,17 @@
+{
+ "name": "with-proxy",
+ "version": "0.0.1",
+ "scripts": {
+ "build": "up build",
+ "dev": "up dev"
+ },
+ "dependencies": {
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "devDependencies": {
+ "@utoo/pack-cli": "*",
+ "@types/react": "^18.0.25",
+ "@types/react-dom": "^18.0.9"
+ }
+}
diff --git a/examples/with-proxy/src/App.tsx b/examples/with-proxy/src/App.tsx
new file mode 100644
index 000000000..ff399d323
--- /dev/null
+++ b/examples/with-proxy/src/App.tsx
@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from "react";
+
+interface Post {
+ userId: number;
+ id: number;
+ title: string;
+ body: string;
+}
+
+export function App() {
+ const [post, setPost] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [endpoint, setEndpoint] = useState<"/api" | "/placeholder">("/api");
+
+ useEffect(() => {
+ setLoading(true);
+ setError(null);
+ fetch(`${endpoint}/posts/1`)
+ .then((r) => (r.ok ? r.json() : Promise.reject(new Error(r.statusText))))
+ .then((data: Post) => {
+ setPost(data);
+ setLoading(false);
+ })
+ .catch((e) => {
+ setError(e instanceof Error ? e.message : String(e));
+ setLoading(false);
+ });
+ }, [endpoint]);
+
+ return (
+
+
devServer.proxy Example
+
+ In dev, requests to /api and /placeholder are
+ proxied to https://jsonplaceholder.typicode.com via{" "}
+ devServer.proxy (Hono), so no CORS is needed.
+