|
1
|
# Vercel (v0) → Replit |
|
2
|
|
|
3
|
## Locate the app & detect package manager |
|
4
|
|
|
5
|
- Check root `package.json` for a `next` dependency and for `app/` or `pages/` directories. |
|
6
|
- If not at root, search common monorepo paths: `apps/web`, `packages/frontend`. |
|
7
|
- Detect the package manager from the lockfile: `package-lock.json`→npm, |
|
8
|
`pnpm-lock.yaml`→pnpm, `yarn.lock`→yarn, `bun.lockb`→bun. |
|
9
|
|
|
10
|
## Working directory |
|
11
|
|
|
12
|
If Next.js lives in a subdirectory, every subsequent command runs from |
|
13
|
there. Update `deploy_config_tool` to `cd` into it: |
|
14
|
|
|
15
|
- build: `["bash", "-c", "cd <dir> && <pkg-mgr> run build"]` |
|
16
|
- start: `["bash", "-c", "cd <dir> && <pkg-mgr> run start"]` |
|
17
|
|
|
18
|
## Ports & scripts |
|
19
|
|
|
20
|
- dev: `next dev -p 5000 -H 0.0.0.0` |
|
21
|
- start: `next start -p 5000 -H 0.0.0.0` |
|
22
|
|
|
23
|
## Dev workflow |
|
24
|
|
|
25
|
Vercel imports initialize with `BEST_EFFORT_FALLBACK`, which does not |
|
26
|
create a workflow for you. Configure one yourself with |
|
27
|
`configure_workflow_tool` before `restart_workflow` — the feedback |
|
28
|
and verification steps depend on it. Use the same subdirectory/pkg |
|
29
|
manager pattern as the build/start commands, e.g. |
|
30
|
`["bash", "-c", "cd <dir> && <pkg-mgr> run dev"]`. |
|
31
|
|
|
32
|
## Replit compatibility rules |
|
33
|
|
|
34
|
- **instrumentation.ts/js**: comment out if it blocks startup, leave a |
|
35
|
one-line explanatory comment. |
|
36
|
- **Build errors → source, not artifacts**: when an error cites a file |
|
37
|
path, confirm whether it's source or compiled output before editing. |
|
38
|
Errors in compiled artifacts (Tailwind/CSS bundles, generated JS, |
|
39
|
type-gen output) point to a source cause — grep the source tree for |
|
40
|
the offending symbol or pattern and fix it there. Don't mask the |
|
41
|
error at the bundler/compiler layer (PostCSS rule-stripping, custom |
|
42
|
loader hacks, `null-loader`). |
|
43
|
- **External allowlists (preflight)**: grep source for image URLs |
|
44
|
passed to `next/image` and whitelist each external hostname under |
|
45
|
`images.remotePatterns` in `next.config.mjs`. Add `'*.replit.dev'` |
|
46
|
and `'*.replit.app'` to `allowedDevOrigins`. Skipping these produces |
|
47
|
runtime errors later. |
|
48
|
- **Binary asset spot-check**: v0 and similar JSON-serialized project |
|
49
|
exports can ship images/fonts as base64 text files that pass HTTP |
|
50
|
200 checks but fail to render. After clone, run |
|
51
|
`file public/**/*.{png,jpg,webp,woff,woff2,ttf}` (or wherever assets |
|
52
|
live) — any binary asset reported as ASCII/UTF-8 text needs |
|
53
|
`base64 -d` back to binary in place. |
|
54
|
- **Verify the running app, not just the build**: a 200 response and a |
|
55
|
clean build log don't mean the page renders. Fetch the page |
|
56
|
(`curl -s <URL> | head`) and confirm the HTML contains real app |
|
57
|
content. Repetitive rebuild or reload loops in dev-server logs mean |
|
58
|
the app is cycling — don't blame the Replit proxy. |
|
59
|
|
|
60
|
## Secrets |
|
61
|
|
|
62
|
Always request env vars referenced by `process.env.*` (DATABASE_URL, |
|
63
|
API keys, etc.) through the `environment-secrets` skill so they land |
|
64
|
in the Replit Secrets store. Never ask the user to paste secret |
|
65
|
values into chat, don't commit them to the repo, and don't scrape |
|
66
|
`.env` into code. |
|
67
|
|
|
68
|
## First message |
|
69
|
|
|
70
|
One short, non-technical line. Don't enumerate steps or mention tools |
|
71
|
/ library names. Template: |
|
72
|
|
|
73
|
```text |
|
74
|
I've pulled in your Vercel project — looks like *a Next.js app for <feature>*. I'll get it running on Replit; this usually takes a few minutes. Nothing needed from you right now. |
|
75
|
``` |
|
76
|
|
|
77
|
If you genuinely need a user-supplied secret later, batch it into one |
|
78
|
request via the `environment-secrets` skill. |