feat(wallet/backend,boutique/backend): DEV env - add hot reload for wallet and boutique backends (#1740)

* setup wallet backend hot reload

* setup wallet backend hot reload dockerfile.dev

* setup boutique backend hot reload

* wallet hot reload watch also for shared folder changes

* fix watch share path and remove chokidar env var

* enable multiple types of local environment run configurations

* pretty fix

* fix pnpm lock

Author: adrianboros

README.md

@@ -100,7 +100,19 @@ If you would like to set up e-commerce application, you will need to create a US
 Navigate to the project's root directory and execute:
 
 ```sh
-pnpm dev
+pnpm dev #this will start the project in hot reload mode for backend containers. Frontend containers have hot reload functionality enabled on all dev commads
+```
+
+other options to start the local env are:
+
+```sh
+pnpm dev:debug #backend containers will not have hot reload feture enabled but will expose and have node `--inspect` option set with wallet container debug port set to 9229 and boutique port set to 9230. Once the containers are running, you can connect your debugger (e.g., Chrome DevTools, VS Code)
+```
+
+and:
+
+```sh
+pnpm dev:lite #backend containers will build and run the builds, no debug and no hot reload for these containers
 ```
 
 Upon executing the above command, the following will be available

boutique-entrypoint.sh

@@ -0,0 +1,12 @@
+#!/bin/sh
+
+if [ "$DEV_MODE" = "lite" ]; then
+  echo "DEV_MODE is lite, running default command..."
+  exec node ./packages/boutique/backend/dist/index.js
+elif [ "$DEV_MODE" = "debug" ]; then
+  echo "DEV_MODE is debug, running build with debug port $DEBUG_PORT open..."
+  exec node --inspect=0.0.0.0:${DEBUG_PORT} ./packages/boutique/backend/dist/index.js
+else
+  echo "DEV_MODE is hot-reload, running dev command with nodemon watcher and rebuild..."
+  exec pnpm boutique:backend dev
+fi

docker/dev/docker-compose.yml

@@ -27,14 +27,20 @@ services:
     container_name: wallet-backend
     build:
       context: ../..
+      args:
+        DEV_MODE: ${DEV_MODE}
       dockerfile: ./packages/wallet/backend/Dockerfile.dev
     depends_on:
       - postgres
       - rafiki-backend
       - redis
+    volumes:
+      - ../../packages/wallet/backend:/home/testnet/packages/wallet/backend
+      - ../../packages/wallet/shared:/home/testnet/packages/wallet/shared
     environment:
       NODE_ENV: development
       PORT: 3003
+      DEBUG_PORT: 9229
       DATABASE_URL: postgres://wallet_backend:wallet_backend@postgres/wallet_backend
       COOKIE_NAME: testnet.cookie
       COOKIE_PASSWORD: testnet.cookie.password.super.secret.ilp
@@ -76,12 +82,18 @@ services:
     container_name: boutique-backend
     build:
       context: ../..
+      args:
+        DEV_MODE: ${DEV_MODE}
       dockerfile: ./packages/boutique/backend/Dockerfile.dev
+    volumes:
+      - ../../packages/boutique/backend:/home/testnet/packages/boutique/backend
+      - ../../packages/boutique/shared:/home/testnet/packages/boutique/shared
     depends_on:
       - postgres
     environment:
       NODE_ENV: development
       PORT: 3004
+      DEBUG_PORT: 9230
       DATABASE_URL: postgres://boutique_backend:boutique_backend@postgres/boutique_backend
       PRIVATE_KEY: ${PRIVATE_KEY}
       KEY_ID: ${KEY_ID}
@@ -91,6 +103,7 @@ services:
       - testnet
     ports:
       - '3004:3004'
+      - '9230:9230' # Map debugger port to local machine's port 9230
     <<: *logging
 
   # Rafiki

package.json

@@ -17,12 +17,16 @@
     "clean:builds": "find . \\( -name \"dist\" -o -name \".next\" \\) -type d -prune -exec rm -rf '{}' +",
     "clean:modules": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +",
     "dev": "pnpm localenv:start && concurrently -n 'WALLET,BOUTIQUE' -c blue.bold,red.bold 'pnpm wallet:frontend dev' 'pnpm boutique:frontend dev'",
+    "dev:debug": "pnpm localenv:start:debug && concurrently -n 'WALLET,BOUTIQUE' -c blue.bold,red.bold 'pnpm wallet:frontend dev' 'pnpm boutique:frontend dev'",
+    "dev:lite": "pnpm localenv:start:lite && concurrently -n 'WALLET,BOUTIQUE' -c blue.bold,red.bold 'pnpm wallet:frontend dev' 'pnpm boutique:frontend dev'",
     "format": "pnpm prettier:write && pnpm lint:fix",
     "lint:check": "eslint --max-warnings=0 .",
     "lint:fix": "eslint --max-warnings=0 --fix .",
     "compose": "docker compose -f ./docker/dev/docker-compose.yml",
     "compose:prod": "docker compose -f ./docker/prod/docker-compose.yml",
-    "localenv:start": "pnpm compose up -d --build",
+    "localenv:start": "DEV_MODE=hot-reload pnpm compose up -d --build",
+    "localenv:start:debug": "DEV_MODE=debug pnpm compose up -d --build",
+    "localenv:start:lite": "DEV_MODE=lite pnpm compose up -d --build",
     "localenv:stop": "pnpm compose down",
     "preinstall": "npx only-allow pnpm",
     "prettier:write": "prettier --config '.prettierrc.js' --write .",
@@ -44,6 +48,7 @@
     "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "globals": "^15.10.0",
+    "nodemon": "^3.1.7",
     "only-allow": "^1.2.1",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",

packages/boutique/backend/Dockerfile.dev

@@ -12,7 +12,7 @@ RUN corepack enable
 RUN corepack prepare pnpm@9.1.4 --activate
 
 # Copy lockfile, NVM and NPM configuration to the working directory
-COPY pnpm-lock.yaml .nvmrc .npmrc ./
+COPY pnpm-lock.yaml .nvmrc .npmrc boutique-entrypoint.sh ./
 
 # Fetch packages from lockfile (https://pnpm.io/cli/fetch#usage-scenario)
 RUN pnpm fetch
@@ -23,7 +23,16 @@ ADD . ./
 # Install packages from virtual store
 RUN pnpm install -r --offline
 
-# Build backend
 RUN pnpm boutique:backend build
 
-CMD ["node", "./packages/boutique/backend/dist/index.js"]
+# Expose debugger port regardlless of DEV_MODE
+EXPOSE ${DEBUG_PORT}
+
+ARG DEV_MODE
+
+# Set it as an environment variable
+ENV DEV_MODE=${DEV_MODE}
+
+RUN chmod +x /home/testnet/boutique-entrypoint.sh
+
+ENTRYPOINT ["/home/testnet/boutique-entrypoint.sh"]

packages/boutique/backend/package.json

@@ -4,6 +4,7 @@
     "start": "node dist/index.js",
     "build:deps": "pnpm --filter @shared/backend build && pnpm --filter @boutique/shared build",
     "build": "pnpm build:deps && tsc --build tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "dev": "nodemon --watch ./src --watch ../shared/src --ext ts,json --delay 0.5 --exec \"pnpm run build && node ./dist/index.js\"",
     "test": "pnpm build:deps && NODE_OPTIONS='--experimental-vm-modules' jest --passWithNoTests --maxWorkers=2"
   },
   "dependencies": {

packages/wallet/backend/Dockerfile.dev

@@ -12,7 +12,7 @@ RUN corepack enable
 RUN corepack prepare pnpm@9.1.4 --activate
 
 # Copy lockfile, NVM and NPM configuration to the working directory
-COPY pnpm-lock.yaml .nvmrc .npmrc ./
+COPY pnpm-lock.yaml .nvmrc .npmrc wallet-entrypoint.sh ./
 
 # Fetch packages from lockfile (https://pnpm.io/cli/fetch#usage-scenario)
 RUN pnpm fetch
@@ -27,6 +27,13 @@ RUN pnpm install -r --offline
 RUN pnpm wallet:backend build
 
 # Expose debugger port
-EXPOSE 9229
+EXPOSE ${DEBUG_PORT}
 
-CMD ["node", "--inspect=0.0.0.0:9229", "./packages/wallet/backend/dist/index.js"]
+ARG DEV_MODE
+
+# Set it as an environment variable
+ENV DEV_MODE=${DEV_MODE}
+
+RUN chmod +x /home/testnet/wallet-entrypoint.sh
+
+ENTRYPOINT ["/home/testnet/wallet-entrypoint.sh"]

packages/wallet/backend/package.json

@@ -4,6 +4,7 @@
     "start": "node -r tsconfig-paths/register dist/index.js",
     "build:deps": "pnpm --filter @shared/backend build && pnpm --filter @wallet/shared build",
     "build": "pnpm build:deps && tsc --build tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "dev": "nodemon --watch ./src --watch ../shared/src --ext ts,json --delay 1 --exec \"pnpm run build && node ./dist/index.js\"",
     "test": "jest --passWithNoTests --maxWorkers=75%",
     "generate": "graphql-codegen --config codegen.yml"
   },