itsMapleLeaf/remix-electron

💡 Feature Request: add .`vscode` folder with debug options in `remix-electron` template

cliffordfajardo opened this issue · 3 comments

cliffordfajardo commented

Scenario

As a user who has just downloaded the remix-electron template, I would like to be able to debug my remix electron app using VS Code's built in debugger.

Motivation for the Feature/Change?

Having a .vscode folder with the settings.json file already preconfigured for a user would allow user:

  • do step through debugging in their VS Code editor.
  • user will not need to figure out how to do this later (enhanced developer experience DX)

Demo

See the YouTube video below created by @kiliman (another awesome remix advocate 💿 )

There likely needs to be some tweaking to ensure it opens debugs the right port / process. I took a peek at another electron app's .vscode folder and they had this (likely need to tweak):

Electron docs: https://www.electronjs.org/docs/latest/tutorial/debugging-vscode

// Sample file (not tested)
{
  "version": "0.2.0",
  "configurations": [
  {
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Debug Main Process",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceFolder}",
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
        "windows": {
          "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
        },
        "args" : ["."],
        "outputCapture": "std"
      }
    ]
  },
  // TODO: change to vitest
  {
      "type": "node",
      "request": "launch",
      "name": "Jest Tests",
      "program": "${workspaceRoot}/node_modules/.bin/jest",
      "args": ["--config", "jest.json", "--runInBand"],
      "console": "internalConsole",
      "internalConsoleOptions": "neverOpen"
  },
  {
      "type": "chrome",
      "request": "attach",
      "name": "Electron Renderer",
      "port": 9223,
      "webRoot": "${workspaceFolder}",
      "timeout": 10000
  }
  ]
}

Platform

  • Operating System: All
cliffordfajardo commented

I created this issue to leave this as placeholder item, wanted to hear folks's thought's 💭

itsMapleLeaf commented

I tried the steps listed in that gist from killiman, debugged with the dev script, and it seemed to work well. The console became considerably noisier, but that's not a big issue.

I think it'll be good enough to link that doc, then say to use the dev script (or any other honestly)

  • 👀1
cliffordfajardo commented

Thanks - I saw that you added a link to it in the docs

0b54c4b

  • 👍1