The Boilerplate
For Next.js and Electron there is an official boilerplate for new comers to work on:
Link for Next.js, Electron and Typescript
Unforturnately there is no documentation on how to set up a debugger for this kind of "side product".
Debugger Configuation in Vscode
The launch.json File
Having struggled for a while I finally come up with the following configuration:
// <project-dir>/.vscode/launch.json { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Next: Node", "runtimeExecutable": "npm", "runtimeArgs": ["run", "dev"], "port": 9229, "console": "integratedTerminal" } ] }
The next.config.js File
Next in the root directory create a file named next.config.js
. Inside it we add:
// <project-dir>/next.config.js module.exports = { webpack: (config) => { config.output = config.output || {}; config.output.devtoolModuleFilenameTemplate = function (info) { return "file:///" + encodeURI(info.absoluteResourcePath); }; return config; }, };
Now we can press F5
to start npm run dev
in debug mode. It works in frontend as well but in vscode I mostly debug backend script since chrome dev tool is much more convenient for debugging frontend code.