feat(debugging): enabled local debugging in vscode using webpack and sourcemaps

Author: pharindoko

.vscode/launch.json

@@ -1,14 +1,16 @@
 {
-    // Verwendet IntelliSense zum Ermitteln möglicher Attribute.
-    // Zeigen Sie auf vorhandene Attribute, um die zugehörigen Beschreibungen anzuzeigen.
-    // Weitere Informationen finden Sie unter https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "Launch Program",
-            "program": "${workspaceFolder}\\src\\handler.js"
-        }
+      {
+        "name": "Launch Program",
+        "type": "node",
+        "request": "launch",
+        "cwd": "${workspaceRoot}",
+        "program": "${workspaceRoot}/src/handler.js",
+        "outFiles": [
+          "${workspaceRoot}/dist/handler.js"
+        ],
+        "sourceMaps": true
+      }
     ]
-}
+  }

README.md

@@ -175,16 +175,23 @@ curl -H "x-api-key: {API - KEY}" -H "Content-Type: application/json" https://xxx
 - [AWS Lambda](https://aws.amazon.com/lambda/features/)
 - [AWS S3](https://aws.amazon.com/s3/)
 
-## Develop locally
+## Develop and debug locally
 
 db.json file will be loaded directly from your local filesystem. No AWS access is needed.
 
-#### 1. Start solution
+#### Start solution
 
 ```bash
 npm run start
 ```
 
+#### Debug solution
+If you want to debug locally in VS Code everything is already setup (using webpack with sourcemap support)
+
+```bash
+npm run debug
+```
+
 #### 2. Test your API
 
 To test you can use e.g. [Postman](https://www.getpostman.com/)

package.json

@@ -5,6 +5,7 @@
 	"main": "src/server.js",
 	"scripts": {
 		"test": "npm run build & NODE_ENV=local jest",
+		"debug": "NODE_ENV=debug webpack --watch",
 		"start": "NODE_ENV=local webpack --watch",
 		"dev": "NODE_ENV=development webpack --watch",
 		"diagnostic": "NODE_ENV=offline sls offline",

src/handler.js

@@ -19,7 +19,7 @@ module.exports.handler = async (event, context) => {
 };
 
 if (require.main === module) {
-  if (process.env.NODE_ENV === 'local') {
+  if (process.env.NODE_ENV === 'local' || process.env.NODE_ENV === 'debug') {
     start(app.server, 3000);
   } else if (process.env.NODE_ENV === 'development') {
     (async () => {

src/utils.js

@@ -48,7 +48,7 @@ const request = async () => {
 
 function init() {
   logger.info(`NODE_ENV: ${process.env.NODE_ENV}`);
-  if (process.env.NODE_ENV === 'local') {
+  if (process.env.NODE_ENV === 'local' || process.env.NODE_ENV === 'debug') {
     startLocal(3000);
   } else if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'offline') {
     logger.info('start development mode');

webpack.config.js

@@ -4,7 +4,7 @@ const CopyPlugin = require('copy-webpack-plugin');
 const NodeEnvPlugin = require('node-env-webpack-plugin');
 const NodemonPlugin = require('nodemon-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
-
+const { join } = require('path');
 
 module.exports = {
   mode: 'development',
@@ -15,17 +15,22 @@ module.exports = {
     new NodeEnvPlugin({
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
     }),
-    new NodemonPlugin({
-    }),
+    process.env.NODE_ENV === 'debug' ? new NodemonPlugin({ nodeArgs: ['--inspect-brk'] }) : new NodemonPlugin(),
   ],
   entry: { 'src/handler': './src/handler.js' },
   optimization: {
     minimizer: [new TerserPlugin()],
   },
   devtool: 'source-map',
-  devServer: {
-    contentBase: './dist',
+  output: {
+    path: join(__dirname, 'dist'),
+    filename: 'handler.js',
+
+    // Bundle absolute resource paths in the source-map,
+    // so VSCode can match the source file.
+    devtoolModuleFilenameTemplate: '[absolute-resource-path]',
   },
+
   target: 'node',
   externals: [nodeExternals()],
   module: {