make the setup to use debugger easier

Add a readme note on how to use the debugger. Also adds a commented out
outbound host for debugger connection and a npm script to build debug.

Signed-off-by: Karthik Ganeshram <karthik.ganeshram@fermyon.com>

Author: karthik2804

templates/http-js/content/README.md

@@ -29,4 +29,11 @@ To use additional Spin interfaces, install the corresponding packages:
 | PostgreSQL    | `@spinframework/spin-postgres`  |
 | Redis         | `@spinframework/spin-redis`     |
 | SQLite        | `@spinframework/spin-sqlite`    |
-| Variables     | `@spinframework/spin-variables` |
+| Variables     | `@spinframework/spin-variables` |
+
+## Using the StarlingMonkey Debugger for VS Code
+
+1. First install the [StarlingMonkey Debugger](https://marketplace.visualstudio.com/items?itemName=BytecodeAlliance.starlingmonkey-debugger) extension.
+2. Build the component using the debug command `npm run build:debug`.
+3. Uncomment `tcp://127.0.0.1:*` in the `allowed_outbound_hosts` field in the `spin.toml`.
+4. Start the debugger in VS Code which should start Spin and attach the debugger. The debugger needs to be restarted for each http call.

templates/http-js/content/build.mjs

@@ -24,7 +24,7 @@ let SourceMapPlugin = {
 }
 
 await build({
-    entryPoints: ['./src/index.ts'],
+    entryPoints: ['./src/index.js'],
     outfile: './build/bundle.js',
     bundle: true,
     format: 'esm',

templates/http-js/content/package.json

@@ -5,6 +5,7 @@
   "main": "index.js",
   "scripts": {
     "build": "node build.mjs && mkdirp dist && j2w -i build/bundle.js --initLocation http://{{project-name | kebab_case}}.localhost -o dist/{{ project-name | kebab_case }}.wasm",
+    "build:debug": "node build.mjs && mkdirp dist && j2w -d -i build/bundle.js --initLocation http://{{project-name | kebab_case}}.localhost -o dist/{{ project-name | kebab_case }}.wasm",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],

templates/http-js/content/spin.toml

@@ -13,6 +13,9 @@ component = "{{project-name | kebab_case}}"
 [component.{{project-name | kebab_case}}]
 source = "dist/{{project-name | kebab_case}}.wasm"
 exclude_files = ["**/node_modules"]
+allowed_outbound_hosts = [
+    # "tcp://127.0.0.1:*", # Uncomment this line to while using the StarlingMonkey Debugger
+]
 [component.{{project-name | kebab_case}}.build]
 command = ["npm install", "npm run build"]
 watch = ["src/**/*.js"]

templates/http-ts/content/README.md

@@ -29,4 +29,11 @@ To use additional Spin interfaces, install the corresponding packages:
 | PostgreSQL    | `@spinframework/spin-postgres`  |
 | Redis         | `@spinframework/spin-redis`     |
 | SQLite        | `@spinframework/spin-sqlite`    |
-| Variables     | `@spinframework/spin-variables` |
+| Variables     | `@spinframework/spin-variables` |
+
+## Using the StarlingMonkey Debugger for VS Code
+
+1. First install the [StarlingMonkey Debugger](https://marketplace.visualstudio.com/items?itemName=BytecodeAlliance.starlingmonkey-debugger) extension.
+2. Build the component using the debug command `npm run build:debug`.
+3. Uncomment `tcp://127.0.0.1:*` in the `allowed_outbound_hosts` field in the `spin.toml`.
+4. Start the debugger in VS Code which should start Spin and attach the debugger. The debugger needs to be restarted for each http call.

templates/http-ts/content/package.json

@@ -5,6 +5,7 @@
   "main": "index.js",
   "scripts": {
     "build": "node build.mjs && mkdirp dist && j2w -i build/bundle.js --initLocation http://{{project-name | kebab_case}}.localhost -o dist/{{ project-name | kebab_case }}.wasm",
+    "build:debug": "node build.mjs && mkdirp dist && j2w -d -i build/bundle.js --initLocation http://{{project-name | kebab_case}}.localhost -o dist/{{ project-name | kebab_case }}.wasm",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],

templates/http-ts/content/spin.toml

@@ -13,6 +13,9 @@ component = "{{project-name | kebab_case}}"
 [component.{{project-name | kebab_case}}]
 source = "dist/{{project-name | kebab_case}}.wasm"
 exclude_files = ["**/node_modules"]
+allowed_outbound_hosts = [
+    # "tcp://127.0.0.1:*", # Uncomment this line to while using the StarlingMonkey Debugger
+]
 [component.{{project-name | kebab_case}}.build]
 command = ["npm install", "npm run build"]
 watch = ["src/**/*.ts"]