vscode debugging with react+babel - node.js

I have a project which these scripts:
"dev": "babel-node --presets 'react,es2015' src/server.js"
"start": "NODE_ENV=development babel-node --presets 'react,es2015' src/server.js"
"build": "NODE_ENV=development webpack -p"
I want to know how launch.json should be wrote to debug with VScode.

You can use debugger; statement, you can set it in your code and when you will run the app, automatically will get in a debug mode on the Browser.
Please read about debugger statement on the link below
https://www.w3schools.com/jsref/jsref_debugger.asp

Related

how to change the path in dotenv with various script commands (in package.json) such as : start , test , etc

well my problem is when I want to switch my script command in package.json like from "start" to "test" for running my Jest test which its commands like :
"scripts": {
"start": "nodemon express/***",
"serve": "node express/***",
"dev": "node express/***",
"test": "jest --watch"
},
and I call dotenv in my project like this
require("dotenv").config({
path: "express/config/.env",
});
The code above, help my to using my environment file like .env
but the problem is that when I want to test my project and I want to switch my script command (in package.json) from like "start" to "test" and change the main path of dotenv environment to something like test.env
You could pass the environment type as an environment variable into your program like so. Note: you will need to use cross-env if you require multi-platform support.
Unix version:
"scripts": {
"start": "NODE_ENV=production nodemon express/***",
"serve": "NODE_ENV=production node express/***",
"dev": "NODE_ENV=dev node express/***",
"test": "NODE_ENV=test jest --watch"
}
cross-env version:
"scripts": {
"start": "cross-env NODE_ENV=production nodemon express/***",
"serve": "cross-env NODE_ENV=production node express/***",
"dev": "cross-env NODE_ENV=dev node express/***",
"test": "cross-env NODE_ENV=test jest --watch"
}
And then access them using the normal method of process.env.NODE_ENV
const envVariablePaths = {
"production": "/path/here",
"dev": "path/here",
"test": "path/here",
}
require("dotenv").config({
path: envVariablePaths[process.env.NODE_ENV],
})
More documentation can be found here

How to run test with Nodemon and Mocha

Hi all I have stacked with this issue which I don't know the problem I follow to seem instruction for running nodemon and mocha here is the image attach to see more, I run
"scripts": {
"test": "nodemon --exec 'mocha -R min'"
},
try this
"scripts": {
"test": "mocha ***/*.test.js",
"test-watch": "nodemon --exec \"npm test\""
}
from here https://www.prashant-kumar.in/unit-testing-using-mocha-in-node-js/

Deploying simple nodejs app to Heroku - Procfile not working

I'm trying to deploy my Express server to my Heroku app, but every time I do, I get an error and it crashes.
I setup my Procfile with the following code: web: node /src/server.js
Where server.js is not in the root of the directory. However, when I try to start the server, I get an error in the logs: Error: Cannot find module '/src/server.js'
When I run the app locally, I have to run npm start in order for it to run the server correctly. Here is the relevant "scripts" portion of my package.json file:
"scripts": {
"start": "NODE_ENV=dev nodemon ./src/server.js --exec babel-node",
"prebuild": "rimraf dist",
"build": "babel ./src -d dist --presets es2015,stage-2 --ignore spec.js,node_modules",
"serve": "NODE_ENV=production node dist/server.js",
"start_babel": "babel-node ./server.js --preset=babel-preset-es2015",
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "eslint ."
}
Since the Procfile overrides the package.json script commands, why is it having trouble finding my file when I've explicitly set it?
I'm not sure about the leading slash. Does using ./src/server.js help at all?

Concurrently does not modify NODE_ENV variable

So I'm working on a project using webpack and wanted to create a script on my package.json to run both dev and production mode from there. I'm a windows user and always use Concurrently to run multiple terminal tasks at the same time.
I set my package.json scripts like this:
"scripts": {
"start": "concurrently \"set NODE_ENV=\" \"webpack --watch\"",
"build": "concurrently \"set NODE_ENV=production\" \"webpack\""
},
The output of this in the terminal is:
set NODE_ENV= exited with code 0
Webpack is watching the files…
...
So basically webpack is working properly, but the variable is not being created/deleted. Both commands are failing.
If I run directly
set NODE_ENV=production
it works, so I'm a bit confused...
Any ideas?
Thanks a lot!
Change:
"start": "concurrently \"set NODE_ENV=\" \"webpack --watch\"",
"build": "concurrently \"set NODE_ENV=production\" \"webpack\""
to:
"start": "NODE_ENV= webpack --watch",
"build": "NODE_ENV=production webpack"
You cannot change the environment in one process and expect it to be changed in another started in parallel. You can only change the env of child processes and only on their startup. Child process always inherits the environment from the parent.
If the above doesn't work on Windows then use cross-env:
npm install --save-dev cross-env
and in package.json use:
"start": "cross-env NODE_ENV= webpack --watch",
"build": "cross-env NODE_ENV=production webpack"

IntelliJ IDEA: How can I create an breakpoint that debug webpack?

Use Intellij IDEA's debug tool to webpack,
OS:MAC
npm script:
"scripts": {
"dev": " webpack-dev-server --inline --hot --display-error-details --content-base --config mvvm/build/webpack.dev.conf.js",
}
it tips:
To debug "build-distributor" script, make sure $NODE_DEBUG_OPTION string is specified as the first argument for node command you'd like to debug.
For example:
{ "start": "node $NODE_DEBUG_OPTION server.js" }
question:
Where to add this code($NODE_DEBUG_OPTION )?
Package.json configuration
First of all you have to create a new Debugging script like this:
"debug": "node $NODE_DEBUG_OPTION node_modules/.bin/webpack-dev-server --config ./path/to/webpack.config.js"
webpack configuration
You have to add this command line:
devtool: 'eval-source-map'
Editor configuration
and then you have to cofigurate your IDE:
and also this:

Resources