erikras / erikras/react-redux-universal-hot-example

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

Open
#1,088 1 comment 2 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12.1k
Forks
2.5k
PR merge metrics
No merged PRs in 30d

Description

### 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**

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.