Skip to content

deploy.md

Latest commit

 

History

History
124 lines (76 loc) · 5.51 KB

deploy.md

File metadata and controls

124 lines (76 loc) · 5.51 KB

Deploy the bundled template

English · 中文

The "Arco Pro (Unofficial)" template inside this repo is deployable to any static host with no backend — MSW intercepts every /api/* request in the browser, so the live site renders the same mock data npm run dev does.

Live reference: arco-pro-demo.vercel.app (deployed via the Vercel path below).

Two recommended paths:

  • A. Vercel — point-and-click, 5 minutes. What powers the live demo.
  • B. Cloudflare Pages — same shape via the Cloudflare dashboard. Use if Vercel doesn't fit (commercial-use concerns, region restrictions, etc.).

GitHub Pages notes → at the bottom if you want a third option.

A. Vercel (recommended, quickest)

Steps

  1. Log in to vercel.com with GitHub → Add New… → Project
  2. Import wn0x00/arco-cli
  3. Configure (the non-default fields matter):
Field Value
Project Name arco-pro-demo (becomes arco-pro-demo.vercel.app)
Framework Preset Vite
Root Directory templates/arco-pro-recommend-full (click Edit)
Build Command (override) see below
Output Directory (override) dist
Install Command (override) npm install
Node.js Version (Settings → General) 22.x

Build command (one line — paste as-is):

node -e "for(const f of['package.json','index.html'])require('fs').writeFileSync(f,require('fs').readFileSync(f,'utf8').replace(/@CONST_PACKAGE_NAME@/g,'arco-pro-demo'))" && npm run build
  1. Environment Variables (apply to all three environments):
Name Value
VITE_APP_TITLE Arco Pro Demo
VITE_DEMO_BANNER 1 (shows the "this is a public demo" banner)

Leave VITE_API_BASE unset — empty means MSW handles every /api/* call, which is what makes the demo work without a backend.

  1. Click Deploy. First build takes 2–4 minutes.

Why the included vercel.json

The template ships a one-line vercel.json at templates/arco-pro-recommend-full/vercel.json:

{ "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] }

Without it Vercel returns a hard 404 for any direct route hit (/login, /dashboard/workplace, …) — it serves static files literally and the client-side router only kicks in once / has loaded.

Custom domain (optional)

Project → Settings → Domains → Add. Free, HTTPS auto-provisioned, no domain-host restriction (your DNS can be anywhere).

B. Cloudflare Pages (dashboard)

Same flow as Vercel above with these differences:

  • Root directory: templates/arco-pro-recommend-full
  • Build output: dist
  • Build command: same node -e "…" && npm install && npm run build snippet from the Vercel section
  • Env vars: same VITE_APP_TITLE + VITE_DEMO_BANNER, plus add NODE_VERSION=22 (Cloudflare doesn't infer it from engines like Vercel does)
  • No vercel.json needed: the template's public/_redirects (/* /index.html 200) provides SPA fallback — Cloudflare reads it automatically

The CF dashboard sometimes hits regional CAPTCHA (CN IPs especially). If you're blocked, try a different network for the one-time project setup; after that Cloudflare auto-deploys on every push.

You'll get https://<project>.pages.dev plus preview URLs for every non-main branch.

Notes on GitHub Pages

GitHub Pages also works for a static SPA demo, with two caveats:

  1. Base path: project pages live under username.github.io/repo-name/. You need to add base: '/arco-cli/' to vite.config.ts, or deploy to a separate repo as the user/org page (username.github.io)
  2. SPA fallback: GitHub Pages doesn't have rewrites. Standard workarounds: a 404.html that's a copy of index.html, or switch the app to HashRouter

This repo doesn't ship a GitHub Pages workflow today — both differences need cooperation from the consumer's deploy config. If you need it, open an issue and we can add a deploy-github-pages.yml that handles both.

Troubleshooting

Build fails: @CONST_PACKAGE_NAME@ still in package.json

The placeholder swap didn't run. Check that Root Directory is templates/arco-pro-recommend-full and the build command starts with the node -e "…" snippet exactly as shown.

/login returns 404

SPA fallback didn't deploy:

  • Vercel: ensure templates/arco-pro-recommend-full/vercel.json exists in the build root and was deployed in the latest push
  • Cloudflare/Netlify: ensure templates/arco-pro-recommend-full/public/_redirects exists — Vite copies it into dist/ automatically

White page, console shows MSW worker fetch 404

mockServiceWorker.js didn't make it into dist/. Vite copies public/ verbatim — check dist/mockServiceWorker.js exists. Hard-refresh (Cmd/Ctrl-Shift-R) if you deployed before v0.10.x.

Build times out

First builds are slow because npm install pulls Playwright + faker + Arco. Retry — second attempt uses cache and finishes in ~2 min.

What gets deployed

The template at templates/arco-pro-recommend-full/ ships as-is with these notes:

  • Mock-only: no backend; dashboard, search-table, and visualisations use deterministic faker-generated data via MSW
  • Auth: admin / admin (or anything — there's no real validation, only a localStorage seam ready for real auth)
  • No analytics, no telemetry: nothing phones home