utooland · yuzheng14 · Mar 6, 2026 · Mar 20, 2026 · Mar 20, 2026
diff --git 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
@@ -0,0 +1,4 @@
+dist
+node_modules
+*.log
+.DS_Store
diff --git a/examples/with-proxy/README.md 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
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>devServer.proxy Example – Utoo Pack</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>
diff --git a/examples/with-proxy/package.json 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
@@ -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<Post | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(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 (
+    <div
+      style={{
+        fontFamily: "system-ui",
+        maxWidth: 640,
+        margin: "2rem auto",
+        padding: "0 1rem",
+      }}
+    >
+      <h1>devServer.proxy Example</h1>
+      <p style={{ color: "#666" }}>
+        In dev, requests to <code>/api</code> and <code>/placeholder</code> are
+        proxied to <code>https://jsonplaceholder.typicode.com</code> via{" "}
+        <code>devServer.proxy</code> (Hono), so no CORS is needed.
+      </p>
+
+      <div style={{ marginBottom: "1rem" }}>
+        <label>
+          <input
+            type="radio"
+            name="path"
+            checked={endpoint === "/api"}
+            onChange={() => setEndpoint("/api")}
+          />{" "}
+          <code>/api</code> (pathRewrite: ^/api → "")
+        </label>
+        <br />
+        <label>
+          <input
+            type="radio"
+            name="path"
+            checked={endpoint === "/placeholder"}
+            onChange={() => setEndpoint("/placeholder")}
+          />{" "}
+          <code>/placeholder</code> (multiple contexts, same target)
+        </label>
+      </div>
+
+      {loading && <p>Loading…</p>}
+      {error && <p style={{ color: "crimson" }}>Error: {error}</p>}
+      {post && !loading && (
+        <article
+          style={{ border: "1px solid #eee", borderRadius: 8, padding: "1rem" }}
+        >
+          <h2 style={{ marginTop: 0 }}>{post.title}</h2>
+          <p style={{ color: "#444" }}>{post.body}</p>
+          <small>
+            Post #{post.id} (userId: {post.userId})
+          </small>
+        </article>
+      )}
+    </div>
+  );
+}
diff --git a/examples/with-proxy/src/index.tsx b/examples/with-proxy/src/index.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { App } from "./App";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/with-proxy/utoopack.json b/examples/with-proxy/utoopack.json
@@ -0,0 +1,52 @@
+{
+  "$schema": "../../packages/pack/config_schema.json",
+  "entry": [
+    {
+      "import": "./src/index.tsx",
+      "html": {
+        "template": "./index.html"
+      },
+      "name": "index"
+    }
+  ],
+  "output": {
+    "path": "./dist",
+    "filename": "with-proxy.[contenthash:8].js",
+    "chunkFilename": "with-proxy.[contenthash:8].js",
+    "cssFilename": "with-proxy.[contenthash:8].css",
+    "assetModuleFilename": "with-proxy.[contenthash:8].css",
+    "clean": true
+  },
+  "optimization": {
+    "minify": false
+  },
+  "react": {
+    "runtime": "classic"
+  },
+  "devServer": {
+    "port": 3000,
+    "proxy": [
+      {
+        "context": "/api",
+        "target": "https://jsonplaceholder.typicode.com",
+        "pathRewrite": {
+          "^/api": ""
+        },
+        "changeOrigin": true,
+        "secure": true
+      },
+      {
+        "context": [
+          "/placeholder",
+          "/json"
+        ],
+        "target": "https://jsonplaceholder.typicode.com",
+        "pathRewrite": {
+          "^/placeholder": "",
+          "^/json": ""
+        },
+        "changeOrigin": true
+      }
+    ]
+  }
+}