Introduce VSCode Remote Containers usage (cadence-workflow#513)

* Downgrading locks with a proper npm

* Introduce .devcontainer for dockerize development using VSCode

* make docker-compose up start local server by default

* updated contributing, readme guides with link to Remove containers and updated Dockerfile to ensure we do not modify lock file during building container

Author: 3vilhamster

.devcontainer/devcontainer.json

@@ -0,0 +1,41 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/docker-existing-docker-compose
+{
+	"name": "Existing Docker Compose (Extend)",
+
+	// Update the 'dockerComposeFile' list if you have more compose files or use different names.
+	// The .devcontainer/docker-compose.yml file contains any overrides you need/want to make.
+	"dockerComposeFile": [
+		"../docker-compose.yml",
+		"docker-compose.yml"
+	],
+
+	// The 'service' property is the name of the service for the container that VS Code should
+	// use. Update this value and .devcontainer/docker-compose.yml to the real service name.
+	"service": "base",
+
+	// The optional 'workspaceFolder' property is the path VS Code should open by default when
+	// connected. This is typically a file mount in .devcontainer/docker-compose.yml
+	"workspaceFolder": "/usr/src/service",
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [8088,8090],
+
+	// Uncomment the next line if you want start specific services in your Docker Compose config.
+	// "runServices": []
+
+	// Uncomment the next line if you want to keep your containers running after VS Code shuts down.
+	// "shutdownAction": "none",
+
+	// Uncomment the next line to run commands after the container is created.
+	"postCreateCommand": "npm install --no-save --unsafe-perm"
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as an existing user other than the container default. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "devcontainer"
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,26 @@
+version: '3'
+services:
+  # Update this to the name of the service you want to work with in your docker-compose.yml file
+  base:
+    # Uncomment if you want to override the service's Dockerfile to one in the .devcontainer 
+    # folder. Note that the path of the Dockerfile and context is relative to the *primary* 
+    # docker-compose.yml file (the first in the devcontainer.json "dockerComposeFile"
+    # array). The sample below assumes your primary file is in the root of your project.
+    #
+    # build:
+    #   context: .
+    #   dockerfile: .devcontainer/Dockerfile
+
+    # volumes:
+    #   # Update this to wherever you want VS Code to mount the folder of your project
+    #   - ..:/usr/src/service
+
+    # Uncomment the next four lines if you will use a ptrace-based debugger like C++, Go, and Rust.
+    # cap_add:
+    #   - SYS_PTRACE
+    # security_opt:
+    #   - seccomp:unconfined
+
+    # Overrides default command so things don't shut down after the process ends.
+    command: /bin/sh -c "while sleep 1000; do :; done"
+ 

.docker_env

@@ -0,0 +1,8 @@
+NODE_ENV=development
+CADENCE_TCHANNEL_PEERS="localhost:16232"
+CADENCE_TCHANNEL_SERVICE=cadence-frontend
+CADENCE_WEB_PORT=8088
+CADENCE_EXTERNAL_SCRIPTS=""
+ENABLE_AUTH=false
+AUTH_TYPE=""
+AUTH_ADMIN_JWT_PRIVATE_KEY=""

CONTRIBUTING.md

@@ -6,7 +6,9 @@ This doc is intended for contributors to `cadence-web`
 
 ## Development Environment
 
-Node.js. Check [package.json](https://github.com/uber/cadence-web/blob/master/package.json) for the current version required. We recommend using [nvm](https://github.com/creationix/nvm) to manage your versions.
+Node.js. Check [package.json](https://github.com/uber/cadence-web/blob/master/package.json) for the current version required. We do not recomment nvm since it can provide confusion with npm version.
+
+For development we recommend using VSCode with [Remote Containers plugin](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers). We provide a default configuration for remote container using docker-compose.
 
 You also need to run [cadence-server](https://github.com/uber/cadence) locally or have access to a cadence environment to talk to.
 

Dockerfile

@@ -7,7 +7,7 @@ WORKDIR /usr/build
 COPY . .
 
 # Install app dependencies
-RUN npm install --production --unsafe-perm
+RUN npm install --no-save --production --unsafe-perm
 
 # Bundle the client code
 RUN npm run build-production
@@ -31,4 +31,4 @@ ENV NPM_CONFIG_PRODUCTION=true
 
 # run node server
 EXPOSE 8088
-CMD [ "node", "server.js" ]
+CMD [ "node", "server.js" ]

README.md

@@ -27,12 +27,15 @@ Set these environment variables if you need to change their defaults
 ### Running locally
 
 `cadence-web` requires node `v10.22.1` or greater to be able to run correctly. `cadence-web` uses all the standard [npm scripts](https://docs.npmjs.com/misc/scripts) to install dependencies, run the
-server, and run tests. Additionally to run locally with webpack hot reloading and other conveniences, use
+server, and run tests. To provide a consistent environment we recommend using docker in development.
+To start local server with live reload on code change you can run:
 
 ```
-npm run dev
+docker-compose up
 ```
 
+For development we recommend using VSCode with [Remote Containers plugin](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers). We provide a default configuration for remote container using docker-compose.
+
 For development and contributing to `cadence-web`, please see the [contributing guide](https://github.com/uber/cadence-web/blob/master/CONTRIBUTING.md).
 
 You may also use docker by pulling [ubercadence/web](https://hub.docker.com/r/ubercadence/web/). It is also included in the Cadence server's [local docker setup](https://github.com/uber/cadence/tree/master/docker).

docker-compose.yml

@@ -0,0 +1,14 @@
+version: '3'
+services:
+  base:
+    env_file:
+      - .docker_env
+    image: node:fermium-bullseye
+    volumes:
+      - .:/usr/src/service
+    working_dir: /usr/src/service
+    command: npm run dev
+  install:
+    extends:
+      base
+    command: /bin/sh -c "npm install --no-save --unsafe-perm && npm run dev"