Spin up a fully-featured JavaScript remote workspace in seconds.
This example uses React + TypeScript + Vite but you can adapt it to any Node-based stack.

​
1 · Complete devcontainer.json

Save the file below to .devcontainer/devcontainer.json in your repository or upload it while creating the workspace.

{
  // ➊ Friendly name shown in the workspace list
  "name": "React Remote Workspace",

  // ➋ Official image with Node 20 + common tooling
  "image": "mcr.microsoft.com/devcontainers/javascript-node:20-bullseye",

  // ➌ Install project dependencies right after the container is created
  "postCreateCommand": "corepack enable && pnpm install",

  // ➍ Forward ports so Factory auto-detects and previews them
  "forwardPorts": [5173],

  // ➎ Workspace-local VS Code settings (applied inside the remote workspace)
  "settings": {
    "terminal.integrated.scrollback": 10000,
    "eslint.format.enable": true,
    "editor.formatOnSave": true
  },

  // ➏ Recommended VS Code extensions for everyone who enters the workspace
  "extensions": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "steoates.autoimport"
  ],

  // ➐ Lifecycle hooks – run tests after dependencies are installed
  "postAttachCommand": "pnpm test --if-present"
}

​
What each setting does

MarkerFieldPurpose
➊ nameDisplay name in Factory UI.
➋ imageStarts from a Node 20 image that already includes git, curl, and common JS tooling.
➌ postCreateCommandRuns once after the container is built; installs packages via pnpm (fastest). Replace with npm install if preferred.
➍ forwardPortsExposes Vite’s default dev server on port 5173 so Factory shows a live preview link.
➎ settingsVS Code-style settings scoped inside the remote workspace—keeps local editor prefs untouched.
➏ extensionsAuto-installs linting/formatting helpers for every collaborator—no manual setup.
➐ postAttachCommandRuns every time someone connects; perfect for lightweight checks like unit tests.

​
2 · Common Commands

Once the workspace is attached to your session, open the Terminal toolkit and try:

TaskCommand
Start dev serverpnpm dev (or npm run dev)
Run unit testspnpm test
Execute linterpnpm lint
Build production bundlepnpm build
Install a packagepnpm add axios
Upgrade depspnpm up --latest
Check TypeScript typespnpm type-check

All output streams back into chat; no local Node install required.

​
3 · JavaScript / TypeScript Best Practices in Remote Workspaces

  1. Use pnpm + corepack – Faster installs and deterministic lockfiles (corepack enable && pnpm install).
  2. Cache build tools – Move heavy installs (Playwright, Cypress) to a Dockerfile stage to speed up rebuilds.
  3. Lock Node version – Pin to a major/minor (20-bullseye) so everyone runs the same runtime.
  4. Keep forwardPorts in sync – If you switch to Next.js (port 3000) or Remix (port 5173), update the list.
  5. Run type checks on attach – Catch errors early with postAttachCommand: "pnpm type-check".
  6. Share VS Code extensions – List ESLint/Prettier so new teammates are productive from minute one.
  7. Avoid global installs – Use workspace scripts; they’re already on the PATH inside the remote workspace.
  8. Test locally – devcontainer up before committing to ensure the image builds without Factory-specific magic.

​
Next steps

  • Customize the image by adding a Dockerfile for Playwright, Prisma, etc.
  • Add Secrets (e.g., API_KEY) in Integrations → Secrets and reference them in your devcontainer.
  • Rebuild the workspace after any devcontainer change to pick up new tooling.