Detailed Solution: How to debug the API server in dev mode using Visual Code

[JoeGrasso]

Solves issue #830

1. Change all file imports (not module) on the API server to their relative location, eg.

    import {mapUrl} from 'utils/url.js'; to 
    import {mapUrl} from './utils/url.js';

2. Add retain lines in .babelrc

{
  "presets": ["react", "es2015", "stage-0"],
  "plugins": [
    "transform-runtime",
    "add-module-exports",
    "transform-decorators-legacy",
    "transform-react-display-name"
  ],
  "env": {
    "development": {
      "plugins": [
        "typecheck",
        ["react-transform", {
            "transforms": [{
                "transform": "react-transform-catch-errors",
                "imports": ["react", "redbox-react"]
              }
            ]
        }]
      ]
    }
  },
  "retainLines": true  <-------------------------------- add this line
}

3. Configure APIPort to have else value of 3030:

  apiHost: process.env.APIHOST || 'localhost',
  apiPort: process.env.APIPORT || 3030, <--------------- add "|| 3030"

4. Modify Visual Code launch json: a. change program path from bin/server.js to bin/api.js b. change environment from development to production

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}\\bin\\api.js", <------ a. change this
            "stopOnEntry": false, <----- can opt'ly make true to stop on first line of code hit
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "production" <--- b. change this
            },
            "externalConsole": false,
            "sourceMaps": false,
            "outDir": null
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "address": "localhost",
            "restart": false,
            "sourceMaps": false,
            "outDir": null,
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        }
    ]
}

5. Set a break point on updating widget (in api/actions/widget/update)

import load from './load';

export default function update(req) {
  return new Promise((resolve, reject) => {
    .......
        const widgets = load(req);
        const widget = req.body;

6. Run (in Visual Code) debug and let is cycle thru, important it cycles thru completely!! 7. In node command prompt type "npm run dev" 8. Open browser to localhost:3000, click widgets link & modify any widget. On save the breakpoint will be hit

[josmardias]

@JoeGrasso awesome man, thanks for this contribution.

@erikras, can you please turn this into a wiki page so we can close this issue?