Add debug flags and instructions for debugging frontends (#1519)

* Add debug flags and instructions for debugging frontends (#195) * add debug flags and instructions to frontend package.json files and readmes * update changelog * update changelog
CityOfDetroit · Jul 20, 2021 · 9fad16f · 9fad16f
1 parent ca50bca
commit 9fad16f
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,8 @@ All notable changes to this project will be documented in this file. The format
 (_Note:_ it our intention to improve our release process going forward by using [Semantic Versioning](https://semver.org/spec/v2.0.0.html).)
 
 ## Unreleased
+- Added:
+  - Debug flags for public and partner site ([Detroit Team #195](https://github.com/CityOfDetroit/bloom/pull/195), [#1519](https://github.com/bloom-housing/bloom/pull/1519))
 
 ### General
 

diff --git a/sites/partners/README.md b/sites/partners/README.md
@@ -12,6 +12,25 @@ This is a reference implementation of the partners-facing web app, providing the
 - Copy `.env.template` to `.env.local` and edit variables appropriate to your local environment. S[ee the docs here](https://nextjs.org/docs/basic-features/environment-variables) for more detail on configuration options.
 - `yarn dev`
 
+### Debugging
+Starting the site with `yarn dev` includes the necessary debug flags.
+
+To connect to it from VS Code, add a configuration to launch.json that looks like
+```shell script
+{
+  "name": "Attach to Partners Site",
+  "port": 9231,
+  "request": "attach",
+  "skipFiles": [
+    "<node_internals>/**"
+  ],
+  "type": "node",
+  "restart": true,
+  "sourceMaps": true,
+  "cwd": "${workspaceFolder}/sites/partners"
+},
+```
+
 ## Running end-to-end tests locally
 
 - Start the Next.js server: `yarn test`

diff --git a/sites/partners/package.json b/sites/partners/package.json
@@ -6,7 +6,7 @@
   "license": "Apache-2.0",
   "private": true,
   "scripts": {
-    "dev": "NODE_OPTIONS='--inspect=9230' next -p ${NEXTJS_PORT:-3001}",
+    "dev": "NODE_OPTIONS='--inspect=9231' next -p ${NEXTJS_PORT:-3001}",
     "build": "next build",
     "test": "concurrently \"yarn dev\" \"cypress open\"",
     "test:headless": "concurrently \"yarn dev\" \"cypress run\"",

diff --git a/sites/public/README.md b/sites/public/README.md
@@ -12,6 +12,25 @@ This is the beginning of a reference implementation of the public-facing web app
 - Copy `.env.template` to `.env.local` and edit variables appropriate to your local environment. S[ee the docs here](https://nextjs.org/docs/basic-features/environment-variables) for more detail on configuration options.
 - `yarn dev`
 
+### Debugging
+Starting the site with `yarn dev` includes the necessary debug flags.
+
+To connect to it from VS Code, add a configuration to launch.json that looks like
+```shell script
+{
+  "name": "Attach to Public Site",
+  "port": 9230,
+  "request": "attach",
+  "skipFiles": [
+    "<node_internals>/**"
+  ],
+  "type": "node",
+  "restart": true,
+  "sourceMaps": true,
+  "cwd": "${workspaceFolder}/sites/public"
+},
+```
+
 ## Running end-to-end tests locally
 
 - Start the Next.js server: `yarn test`

diff --git a/sites/public/package.json b/sites/public/package.json
@@ -6,7 +6,7 @@
   "license": "Apache-2.0",
   "private": true,
   "scripts": {
-    "dev": "next -p ${NEXTJS_PORT:-3000}",
+    "dev": "NODE_OPTIONS='--inspect=9230' next -p ${NEXTJS_PORT:-3000}",
     "build": "next build",
     "test": "concurrently \"yarn dev\" \"cypress open\"",
     "test:headless": "concurrently \"yarn dev\" \"cypress run\"",