.env with debugging breakpoint using vscode and dotenv npm

Question

I'm using a nodejs server side api, setting up environment variables with dotenv npm package, and running the code from npm scripts in package.json as below:

"scripts": {
   "local": "cross-env NODE_ENV=local nodemon ./bin/www"
}

What I need is to configure my .vscode/launch.json file.

Currently it looks like:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": []
}

Kindly guide me. Thanks, Gopal.R

dotenv npm package
Visual Studio Code - Launch configurations

jgraup · Answer 1 · 2019-09-27T15:35:30.060

You would want to set the .dotenv environmental variable up like:

NODE_ENV=local

Then to require it in your debugger, you would want to add it into your launch.json configurations like:

"runtimeArgs": [
    "--require=dotenv/config"
]

Here it is in context:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [ 
        {
            "type": "node",
            "request": "launch",
            "name": "Launch | local with dotenv config",
            "program": "${workspaceFolder}/bin/www/your_script.js",
            "runtimeArgs": [
                "--require=dotenv/config"
            ]
        }
    ]
}

--require=dotenv/config is the equivalent of running require('dotenv').config() in your script or node -r dotenv/config your_script.js if you're using the command line.

Here are some alternate examples of where environmental variables can be placed in the config.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [ 
        {
            "type": "node",
            "request": "launch",
            "name": "Launch | local using env file",
            "program": "${workspaceFolder}/bin/www/your_script.js",
            "envFile": "${workspaceFolder}/.env"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Launch | local without dotenv",
            "program": "${workspaceFolder}/bin/www/your_script.js",
            "env" : {
                "NODE_ENV" : "local"
            }
        }
    ]
}

Note: This code hasn't been tested... so feedback is welcome.

`"envFile": "${workspaceFolder}/.env"` worked for me. – Zesa Rex Nov 02 '20 at 00:52 — Zesa Rex, Nov 02 '20 at 00:52

score 3 · Answer 2 · answered Feb 01 '21 at 15:33

I had the same question for typescript debugging and I found answer here. Need to specify runtimeArgs and envFile parameters to make it work.

Example of launch.json for TypeScript debugging:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/src/server.ts",
            "preLaunchTask": "tsc: build - tsconfig.json",
            "outFiles": [
                "${workspaceFolder}/built/**/*.js"
            ],
            "runtimeArgs": [
                "--require=dotenv/config"
            ],
            "envFile": "${workspaceFolder}/.env"
        }
    ]
}

.env with debugging breakpoint using vscode and dotenv npm

2 Answers2

Linked