TypeScript/Node.js build&run&debug configuration for Visual Studio Code

After reading allot of pages and pseudo professional opinions on SO, I came up with my simple build end debug configuration for Visual Studio Code.

You basically need three files. tsconfig.json to “compile” your .ts files to appropriate .js files.

tasks.json to actually start the compilation process inside the VSCode GUI

and launch.json to setup the launch end debug process of your nodejs app.

tsconfig.json
{ 
    "compilerOptions": { 
    "target": "ES6", 
    "module":"CommonJS", 
    "outDir": "app", 
    "rootDir": "src", 
    "sourceMap": true, 
    "noImplicitAny": true, 
    "removeComments": true, 
    "preserveConstEnums": true 
    } 
}
tasks.json
{ 
"version": "2.0.0", 
"tasks": [ 
{ 
"type": "typescript", 
"tsconfig": "tsconfig.json", 
"problemMatcher": [ "$tsc" ], 
"group": { "kind": "build", "isDefault": true }, 
"label": "tsc: build - tsconfig.json" } 
]}
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"preLaunchTask": "tsc: build - tsconfig.json",
"program": "${workspaceFolder}/app/wallet.js"
}
]
}

take notice of the preLaunchTask which launches the compilation process

Need a node.js dev project?

Why clutter your mac or PC. Run it inside a container. Simple as:

https://code.visualstudio.com/docs/remote/containers-tutorial

But than you discover that your files mounted with the -v command inside the container are not available directly to the host OS if it’s on macOS. Basically is a container inside a container and you need another container to acces your files or synchronize your dev folder with the data folder inside the container:

https://stackoverflow.com/a/55648186

Well, I’ll go with the sync command:

docker cp access_volume:/data local-data
# modify local-data
docker cp local-data access_volume:/data

[EDIT 20200925]: as per:

https://code.visualstudio.com/docs/remote/containers-advanced

you can create a:

"mounts": [
  "source=/local/source/path/goes/here,target=/target/path/in/container/goes/here,type=bind,consistency=cached"
]

inside your devcontainer.json to map your local folder inside the container.

laravel/installer v2.3.0 requires ext-zip * -> the requested PHP extension zip is missing from your system.

After fiddling with MAMP and its installation of PHP as global for scripts in terminal/console for hours I gave up with the somehow logic instructions for MAMP installations, as I was unable to upgrade the laravel/installer.

https://gist.github.com/yehgdotnet/fd9b86a08c5e0c03fa57ad3ae8217892

# install dependencies
brew install autoconf # required by pecl 
brew install libzip


# install zip extenion in your selected MAMP PHP version 
ls /Applications/MAMP/bin/php/
cd /Applications/MAMP/bin/php/php[Version]bin
pecl install zip

# edit php.ini in your selected MAMP PHP version 
ls /Applications/MAMP/conf/p*
cd /Applications/MAMP/conf/php7.3.8/ 
echo "extension=zip" >> php.ini

What worked for me was to install PHP on my macos with HomeBrew and link/add it to the $PATH.

https://stackoverflow.com/questions/58290566/install-ext-zip-for-mac/58300437#58300437

brew update
brew install php@7.3
echo 'export PATH="/usr/local/opt/php@7.3/bin:$PATH"' >> .bash_profile
echo 'export PATH="/usr/local/opt/php@7.3/sbin:$PATH"' >> .bash_profile

Exception has occurred. Illuminate\Contracts\Encryption\DecryptException: The payload is invalid.

Restarted an older project in Laravel. To my surprise there were no major headaches.

Just the time to setup my new favorite tool: Visual Studio Code. A great way to develop and debug for PHP inside or outside of containers.

Just in the middle of the first debug session Laravel drops an error: Exception has occurred. Illuminate\Contracts\Encryption\DecryptException: The payload is invalid.

A quick google finds out the page on: https://stackoverflow.com/questions/47355311/laravel-5-with-xdebug-always-throws-the-payload-is-invalid

Tried both methods and both work.

The correct solution is to just add the “XDEBUG_SESSION” cookie to the exceptions array in the App\Http\Middleware\EncryptCookies middleware.

/**
 * The names of the cookies that should not be encrypted.
 *
 * @var array
 */
protected $except = [
    'XDEBUG_SESSION'
];

But I preffer:

If the answer doesn’t work, try adding this into launch.json

{
        "name": "Listen for XDebug",
        "type": "php",
        "request": "launch",
        "port": 9001,
        "ignore": [
            "**/vendor/**/*.php"
        ]
    },

Because that way the Xdebug cookie exception does not make it to the production app and security is maintained.