erikras / erikras/react-redux-universal-hot-example
Detailed Solution: How to debug the API server in dev mode using Visual Code
- 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
Assessment
This issue has not been assessed yet.