Add documentation for running cadence-web on VSCode Dev Containers (#528

)

* Update README.md

* Remove npm run dev from docker-compose

README.md

@@ -14,27 +14,34 @@ This web UI is used to view workflows from [Cadence][cadence], see what's runnin
 
 Set these environment variables if you need to change their defaults
 
-| Variable                  | Description                                   | Default           |
-| ------------------------- | --------------------------------------------- | ----------------- |
-| CADENCE_TCHANNEL_PEERS    | Comma-delmited list of tchannel peers         | 127.0.0.1:7933    |
-| CADENCE_TCHANNEL_SERVICE  | Name of the cadence tchannel service to call  | cadence-frontend  |
-| CADENCE_WEB_PORT          | HTTP port to serve on                         | 8088              |
-| CADENCE_EXTERNAL_SCRIPTS     | Addtional JavaScript tags to serve in the UI  |                |
-| ENABLE_AUTH          | Enable auth feature                                | false             |
-| AUTH_TYPE          | concurrently supports ADMIN_JWT                      | ''                |
-| AUTH_ADMIN_JWT_PRIVATE_KEY          | JWT signing private key for ADMIN_JWT type  | ''        |
+| Variable                   | Description                                  | Default          |
+| -------------------------- | -------------------------------------------- | ---------------- |
+| CADENCE_TCHANNEL_PEERS     | Comma-delmited list of tchannel peers        | 127.0.0.1:7933   |
+| CADENCE_TCHANNEL_SERVICE   | Name of the cadence tchannel service to call | cadence-frontend |
+| CADENCE_WEB_PORT           | HTTP port to serve on                        | 8088             |
+| CADENCE_EXTERNAL_SCRIPTS   | Addtional JavaScript tags to serve in the UI |                  |
+| ENABLE_AUTH                | Enable auth feature                          | false            |
+| AUTH_TYPE                  | concurrently supports ADMIN_JWT              | ''               |
+| AUTH_ADMIN_JWT_PRIVATE_KEY | JWT signing private key for ADMIN_JWT type   | ''               |
 
 ### 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. To provide a consistent environment we recommend using docker in development.
-To start local server with live reload on code change you can run:
+server, and run tests.
 
-```
-docker-compose up
-```
+To provide a consistent environment we recommend using docker in development. We provide a default configuration for remote containers using docker-compose.
+
+#### Using VSCode Dev Containers
 
-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.
+1. Set up the [Remote Containers plugin](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) in VSCode.
+2. Open the cadence-web directory in VSCode.
+3. Use the Command Palette to select the 'Reopen folder in Container' option. `npm install` should run automatically in the container upon doing so.
+4. Run the app in the container with `npm run dev`.
+5. Open `localhost:8088` (or the custom Cadence Web port you have defined) to load the webapp.
+
+#### Using docker-compose to start the dev container
+
+To start local server with live reload on code change you can run `docker-compose up`.
 
 For development and contributing to `cadence-web`, please see the [contributing guide](https://github.com/uber/cadence-web/blob/master/CONTRIBUTING.md).
 
@@ -55,21 +62,21 @@ All options are optional.
 For example, here is how you would add a request count metric using `uber-statsd-client`:
 
 ```javascript
-var app = require('cadence-web')
-var createStatsd = require('uber-statsd-client')
+var app = require('cadence-web');
+var createStatsd = require('uber-statsd-client');
 var sdc = createStatsd({
-    host: 'statsd.example.com'
-})
-
-app.use(async function(ctx, next) {
-  sdc.increment('http.request')
-  await next()
-})
-.init()
-.listen(7000)
+  host: 'statsd.example.com',
+});
+
+app
+  .use(async function(ctx, next) {
+    sdc.increment('http.request');
+    await next();
+  })
+  .init()
+  .listen(7000);
 ```
 
-
 The [webpack](https://webpack.js.org/) configuration is also exported as `webpackConfig`, and can be modified before calling `init()`.
 
 ### Licence

docker-compose.yml

@@ -11,4 +11,4 @@ services:
   install:
     extends:
       base
-    command: /bin/sh -c "npm install --no-save --unsafe-perm && npm run dev"
+    command: /bin/sh -c "npm install --no-save --unsafe-perm"