A ready-to-run remote workspace template for modern React & TypeScript projects
devcontainer.json
.devcontainer/devcontainer.json
in your repository or upload it while creating the workspace.
Marker | Field | Purpose |
---|---|---|
➊ name | Display name in Factory UI. | |
➋ image | Starts from a Node 20 image that already includes git , curl , and common JS tooling. | |
➌ postCreateCommand | Runs once after the container is built; installs packages via pnpm (fastest). Replace with npm install if preferred. | |
➍ forwardPorts | Exposes Vite’s default dev server on port 5173 so Factory shows a live preview link. | |
➎ settings | VS Code-style settings scoped inside the remote workspace—keeps local editor prefs untouched. | |
➏ extensions | Auto-installs linting/formatting helpers for every collaborator—no manual setup. | |
➐ postAttachCommand | Runs every time someone connects; perfect for lightweight checks like unit tests. |
Task | Command |
---|---|
Start dev server | pnpm dev (or npm run dev ) |
Run unit tests | pnpm test |
Execute linter | pnpm lint |
Build production bundle | pnpm build |
Install a package | pnpm add axios |
Upgrade deps | pnpm up --latest |
Check TypeScript types | pnpm type-check |
corepack enable && pnpm install
).20-bullseye
) so everyone runs the same runtime.forwardPorts
in sync – If you switch to Next.js (port 3000) or Remix (port 5173), update the list.postAttachCommand: "pnpm type-check"
.devcontainer up
before committing to ensure the image builds without Factory-specific magic.Dockerfile
for Playwright, Prisma, etc.API_KEY
) in Integrations → Secrets and reference them in your devcontainer.