How to debug a Remix V2 (Vite) application with VSCode

#javascript #vscode #debug #remix

How to debug a Remix V2 (With Vite) application with Vite.

Go to the left panel and click the bug icon.
Click Run and Debug.
Select Node.js

(Alternatively create a file called launch.json in <project-root>/.vscode (If the .vscode folder doesn't exist, create it)

Put the following code inside it:

{
  "version": "0.2.0",

  "configurations": [
    {
      "command": "pnpm dev",
      "name": "Launch Program",
      "request": "launch",
      "type": "node-terminal",
      "cwd": "${workspaceFolder}"
    },
    {
      "name": "Attach by Process ID",
      "processId": "${command:PickProcess}",
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "node"
    }
  ]
}

Modify where it says command, and replace it with your package manager and the dev command of package.json

Just in case, here's my package.json (Packages omitted)

{
  "name": "deploud",
  "private": true,
  "sideEffects": false,
  "type": "module",
  "scripts": {
    "build": " remix vite:build",
    "dev": "remix vite:dev",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "dotenv wrangler pages dev ./build/client",
    "tsc": "tsc",
    "extract": "lingui extract --clean",
    "compile": "lingui compile",
    "db:generate": "drizzle-kit generate",
    "db:migrate": "dotenv tsx ./app/.server/db/migrate.ts",
    "w:deploy": "npm run build && wrangler pages deploy ./build/client",
    "preview": "npm run build && wrangler pages dev ./build/client",
    "build-cf-types": "wrangler types",
    "icons": "npx @svgr/cli --ext=jsx  --out-dir  app/assets/generated/icons -- app/assets/icons",
    "icons:watch": "npm-watch icons",
    "introspect": "dotenv drizzle-kit introspect"
  },
  "dependencies": {},
  "devDependencies": {},
  "engines": {
    "node": ">=18.0.0"
  },
  "imports": {
    "#*": "./*"
  },
  "overrides":{} 
}