enhance: unify VS code devcontainer setup. If you use this, check out…

… the docs for changes

.devcontainer/.tmux.conf

@@ -0,0 +1 @@
+set -g mouse on

.devcontainer/Dockerfile

@@ -1,8 +1,12 @@
 ARG VARIANT=16
 FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:dev-${VARIANT}
 
+COPY .tmux.conf /home/node/.tmux.conf
+
 RUN apt-get update \
     && export DEBIAN_FRONTEND=noninteractive \
-    && apt-get -y install --no-install-recommends default-mysql-client tmux bc \
+    && apt-get -y install --no-install-recommends default-mysql-client finger tmux bc \
     && apt-get clean -y \
     && rm -rf /var/lib/apt/lists/*
+
+RUN mkdir /owid-content && chown node:node /owid-content

.devcontainer/devcontainer.json

@@ -17,6 +17,6 @@
     // "forwardPorts": [3000, 27017],
 
     // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-    "remoteUser": "node",
-    "postCreateCommand": "/bin/bash -c ./devTools/docker/devcontainer-postprocess.sh"
+    "remoteUser": "node"
+    // "postCreateCommand": "make up.devcontainer" // We could experiment with starting the make command automatically
 }

.env.devcontainer

@@ -8,3 +8,4 @@ GRAPHER_DB_USER=grapher
 GRAPHER_DB_PASS=grapher
 GRAPHER_DB_HOST=db
 GRAPHER_DB_PORT=3306
+DEBUG='knex:query'

Makefile

@@ -48,6 +48,26 @@ up: require create-if-missing.env tmp-downloads/owid_chartdata.sql.gz
 		bind Q kill-server \
 		|| make down
 
+up.devcontainer: create-if-missing.env.devcontainer tmp-downloads/owid_chartdata.sql.gz
+	@make validate.env
+	@make check-port-3306
+	@echo '==> Building grapher'
+	yarn install
+	yarn run tsc -b
+
+	@echo '==> Starting dev environment'
+	tmux new-session -s grapher \
+		-n admin \
+			'devTools/docker/wait-for-mysql.sh && yarn run tsc-watch -b --onSuccess "yarn startAdminServer"' \; \
+			set remain-on-exit on \; \
+		new-window -n webpack 'yarn run startSiteFront' \; \
+			set remain-on-exit on \; \
+		new-window -n welcome 'devTools/docker/banner.sh; exec $(LOGIN_SHELL)' \; \
+		bind R respawn-pane -k \; \
+		bind X kill-pane \; \
+		bind Q kill-server
+
+
 up.full: require create-if-missing.env.full wordpress/.env tmp-downloads/owid_chartdata.sql.gz tmp-downloads/live_wordpress.sql.gz wordpress/web/app/uploads/2022
 	@make validate.env.full
 	@make check-port-3306
@@ -96,6 +116,12 @@ create-if-missing.env:
 		cp .env.example-grapher .env; \
 	fi
 
+create-if-missing.env.devcontainer:
+	@if test ! -f .env; then \
+		echo 'Copying .env.devcontainer --> .env'; \
+		cp .env.devcontainer .env; \
+	fi
+
 validate.env:
 	@echo '==> Validating your .env file for make up'
 	@grep '=' .env.example-grapher | sed 's/=.*//' | while read variable; \

docker-compose.devcontainer.yml

@@ -51,7 +51,8 @@ services:
         ports:
             # Exposing via the port specified for Grapher
             # Should always be the same as the WordPress port, because we store both DBs on the same server
-            - "3306:3306"
+            - "3307:3306" # Hardcoded here to 3307 because docker-compose in the VS Code Devcontainer setup is run
+            # from the users shell on the host OS where the env vars are not yet set
         environment:
             MYSQL_ROOT_PASSWORD: weeniest-stretch-contaminate-gnarl
             MYSQL_ROOT_HOST: "%"
@@ -72,6 +73,7 @@ services:
             # - ${SSH_AUTH_SOCK}:/ssh-agent # Forward the SSH agent socket into the container
         environment:
             DB_ROOT_PASS: weeniest-stretch-contaminate-gnarl
+            DB_ROOT_HOST: db
             DATA_FOLDER: "/tmp-downloads"
             # SSH_AUTH_SOCK: "/ssh-agent"
         env_file:

docs/devcontainer-setup.md

@@ -2,20 +2,48 @@
 
 This page describes how to run our develpment environment entirely within a VS Code devcontainer setup - i.e. without instally NodeJS, Mysql etc locally. All that is required is to have needs [VS Code](https://code.visualstudio.com/) with the [remote containers extension](https://code.visualstudio.com/docs/remote/containers) and the [docker runtime](https://www.docker.com/) installed.
 
-Once you have the tools mentioned above installed, just open this repository in VS Code. You should see a notice in the lower left that asks if you want to open this again inside a development container. Answer yes and it will spin that up. Note that the first time you run this it needs to download and ingest the database which takes between 5-15 minutes.
+Once you have the tools mentioned above installed, just open this repository in VS Code. You should see a notice in the lower left that asks if you want to open this again inside a devcontainer. Answer yes and it will spin that up. Note that the first time you run this it needs to download and ingest the database which takes a few minutes.
 
-Once the database has been loaded run the following steps:
+If you had the devcontainer setup running previously and get a message on the lower right asking to rebuild the devcontainer then confirm this to apply any changes to the configuration that have been made.
 
-1. Run `yarn` in the terminal in VS code to install all JavaScript dependencies including TypeScript and webpack
-2. Run `yarn buildTsc` to build the first version of our JS artifacts
-3. run `yarn startTmuxServer`. This should split the terminal in 3 panes using tmux and run 3 components, one in each pane:
-    1. The `typescript --watch` command that recompiles TypeScript whenever you make a change to a _.ts or _.tsx file
-    2. The admin server so you can create charts in a web browser
-    3. The webpack server to build all the CSS files
+Once the database has been loaded run the following steps in VS Code's terminal (i.e. the terminal running inside the devcontainer):
+
+```bash
+make up.devcontainer
+```
+
+This will run [tmux](https://github.com/tmux/tmux/wiki/Getting-Started) and create 3 panels that you can switch between with `<C-b>, n` (i.e. press `CTLR` (on PC)/`CMD` (on Mac) and `b`, then release and press `n`). Mouse support is enabled so you should be able to scroll through the panels and click them in the bottom row. A short welcome message is printed on the initial pane - if you scroll up here you will see a quick cheatsheet with various commands.
 
 Now navigate to http://localhost:3030/admin/charts and have a look at the admin interface. The default user account is `[email protected]` with a password of `admin`
 
-Press `Ctrl/Cmd B + &` to kill the window and end all 3 processes when you are done
+Press `<C-b>, Q` to kill the window and end all 3 processes when you are done. Close VS Code to shut down all docker containers and free up the resources of running the MySQL docker container.
+
+## Accessing Mysql
+
+If you want to access mysql you have two options. ⚠ Note that depending on which one you choose, you will have to use different ports!
+
+1. From the terminal
+
+    In the VS Code terminal that executes inside the devcontainer, run the mysql command line client:
+
+    ```bash
+    mysql -h db -u grapher -p grapher
+    ```
+
+    This will ask you for the password (enter `grapher`) and then show a prompt. See the https://dev.mysql.com/doc/refman/8.0/en/getting-information.html for how to query the database in this interface.
+
+2. From a desktop application
+
+    For more complex interactions it can be useful to run a program like the free [DBeaver](https://dbeaver.io/) database manager. When you install this on your system, enter the following information when creating a connection to the database:
+
+    | Setting       | Value                                                           |
+    | ------------- | --------------------------------------------------------------- |
+    | Database type | MySQL                                                           |
+    | Server        | localhost                                                       |
+    | User          | grapher                                                         |
+    | Password      | grapher                                                         |
+    | Port          | 3307 (<- this is different than the default to avoid conflicts) |
+    | Database      | grapher                                                         |
 
 ## Running tests