From 203a66d28cb4e1d72e55ebd5df509c9ff61b2729 Mon Sep 17 00:00:00 2001 From: senritsu Date: Sun, 22 Aug 2021 17:35:16 +0000 Subject: [PATCH 1/5] feat: add settings for remote dev container --- .devcontainer/Dockerfile | 16 ++++++++++++++++ .devcontainer/devcontainer.json | 33 +++++++++++++++++++++++++++++++++ 2 files changed, 49 insertions(+) create mode 100644 .devcontainer/Dockerfile create mode 100644 .devcontainer/devcontainer.json diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile new file mode 100644 index 000000000..da46bad5c --- /dev/null +++ b/.devcontainer/Dockerfile @@ -0,0 +1,16 @@ +# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.191.1/containers/typescript-node/.devcontainer/base.Dockerfile + +# [Choice] Node.js version: 16, 14, 12 +ARG VARIANT="16-buster" +FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT} + +# [Optional] Uncomment this section to install additional OS packages. +# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \ +# && apt-get -y install --no-install-recommends + +# [Optional] Uncomment if you want to install an additional version of node using nvm +# ARG EXTRA_NODE_VERSION=10 +# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}" + +# [Optional] Uncomment if you want to install more global node packages +# RUN su node -c "npm install -g " diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 000000000..3a0e29747 --- /dev/null +++ b/.devcontainer/devcontainer.json @@ -0,0 +1,33 @@ +// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at: +// https://github.com/microsoft/vscode-dev-containers/tree/v0.191.1/containers/typescript-node +{ + "name": "Node.js & TypeScript", + "build": { + "dockerfile": "Dockerfile", + // Update 'VARIANT' to pick a Node version: 12, 14, 16 + "args": { + "VARIANT": "16" + } + }, + + // Set *default* container specific settings.json values on container create. + "settings": {}, + + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode", + "dsznajder.es7-react-js-snippets", + "eamodio.gitlens", + "github.vscode-pull-request-github" + ], + + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [3000, 8000], + + // Use 'postCreateCommand' to run commands after the container is created. + "postCreateCommand": "npm ci && npm run prestart", + + // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root. + "remoteUser": "node" +} \ No newline at end of file From f043c29d815bd46d625ce608736d34e08b6808e6 Mon Sep 17 00:00:00 2001 From: senritsu Date: Sun, 22 Aug 2021 18:17:24 +0000 Subject: [PATCH 2/5] docs: document dev container usage in README --- README.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/README.md b/README.md index 6b8bc5879..1810150cc 100644 --- a/README.md +++ b/README.md @@ -66,6 +66,27 @@ npm start The examples can be found in the [examples](examples/) folder. +#### Running inside a dev container using VS Code + +It is also possible to run the examples or contribute to the repository using a preconfigured dev container. This removes the need to install dependencies like Node.js on your local machine, and provides a consistent development environment no matter what OS you are on. + +Prerequisites on the local machine: + +- [VS Code](https://code.visualstudio.com/) + [Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack) extension +- [git](https://git-scm.com/) +- [Docker](https://www.docker.com/) + +To run the examples or start developing: + +- Open VS Code +- Click the Remote Development icon in the bottom left corner of the UI -> "Clone repository in Container Volume..." +- Paste `https://github.com/boardgameio/boardgame.io` or use your own fork (or any branch or pull request) +- The container will start up and install all required dependencies automatically +- Wait for terminal output to finish +- Open NPM Scripts panel in the sidebar and run `package.json > start` + +If your VS Code Explorer sidebar has no NPM scripts panel right-click the Explorer header and check "NPM Scripts", or just run `npm run start` yourself from a terminal. + ## Changelog See [changelog](docs/documentation/CHANGELOG.md). From cc84a22fe5f340f905c85eec374bd0d260ee34d2 Mon Sep 17 00:00:00 2001 From: senritsu Date: Mon, 23 Aug 2021 16:39:07 +0200 Subject: [PATCH 3/5] Update .devcontainer/devcontainer.json Co-authored-by: Chris Swithinbank --- .devcontainer/devcontainer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 3a0e29747..66f15291e 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -26,7 +26,7 @@ "forwardPorts": [3000, 8000], // Use 'postCreateCommand' to run commands after the container is created. - "postCreateCommand": "npm ci && npm run prestart", + "postCreateCommand": "npm ci", // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root. "remoteUser": "node" From 6dfb725b510cf75b645a3c7051bfc4acd7eece37 Mon Sep 17 00:00:00 2001 From: senritsu Date: Mon, 23 Aug 2021 15:26:37 +0000 Subject: [PATCH 4/5] chore: apply review suggestions --- .devcontainer/devcontainer.json | 48 ++++++++++++++++----------------- CONTRIBUTING.md | 30 +++++++++++++++++++++ README.md | 21 ++------------- 3 files changed, 56 insertions(+), 43 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 66f15291e..91381c04a 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,33 +1,33 @@ // For format details, see https://aka.ms/devcontainer.json. For config options, see the README at: // https://github.com/microsoft/vscode-dev-containers/tree/v0.191.1/containers/typescript-node { - "name": "Node.js & TypeScript", - "build": { - "dockerfile": "Dockerfile", - // Update 'VARIANT' to pick a Node version: 12, 14, 16 - "args": { - "VARIANT": "16" - } - }, + "name": "Node.js & TypeScript", + "build": { + "dockerfile": "Dockerfile", + // Update 'VARIANT' to pick a Node version: 12, 14, 16 + "args": { + "VARIANT": "16" + } + }, - // Set *default* container specific settings.json values on container create. - "settings": {}, + // Set *default* container specific settings.json values on container create. + "settings": {}, - // Add the IDs of extensions you want installed when the container is created. - "extensions": [ - "dbaeumer.vscode-eslint", - "esbenp.prettier-vscode", - "dsznajder.es7-react-js-snippets", - "eamodio.gitlens", - "github.vscode-pull-request-github" - ], + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode", + "dsznajder.es7-react-js-snippets", + "eamodio.gitlens", + "github.vscode-pull-request-github" + ], - // Use 'forwardPorts' to make a list of ports inside the container available locally. - "forwardPorts": [3000, 8000], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [3000, 8000], - // Use 'postCreateCommand' to run commands after the container is created. - "postCreateCommand": "npm ci", + // Use 'postCreateCommand' to run commands after the container is created. + "postCreateCommand": "npm ci", - // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root. - "remoteUser": "node" + // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root. + "remoteUser": "node" } \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 4cb2d7ab8..4af0f9b16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -48,3 +48,33 @@ Use the following command to preview them: ``` $ npm run docs ``` + +## VS Code remote dev container support + +For minimal effort, the repository is configured to run in a remote dev container from VS Code. + +- No need to install Node.js or any other project-specific tooling and dependencies +- No risk of your local machine environment getting in the way +- Consistent development environment no matter what OS is used +- Useful extensions preinstalled in the container, independent of your local VS Code settings + +### Prerequisites + +- [VS Code](https://code.visualstudio.com/) + [Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack) extension +- [git](https://git-scm.com/) +- [Docker](https://www.docker.com/) + +### Getting started + +- Launch VS Code +- Click the Remote Development icon in the bottom left corner of the UI, then "Clone repository in Container Volume..." +- Paste `https://github.com/boardgameio/boardgame.io` or use your own fork, any branch, or a pull request +- The container will start up and install all required dependencies automatically +- Terminal output will cease when everything is set up and ready to go + +### Running the examples from the VS Code Explorer + +- Open "NPM Scripts" panel in the sidebar +- Click on `package.json > start` + +If the NPM scripts panel is not visible in the Explorer sidebar, open the Explorer settings (3 dots) and check "NPM Scripts". diff --git a/README.md b/README.md index 1810150cc..a869220d2 100644 --- a/README.md +++ b/README.md @@ -66,26 +66,9 @@ npm start The examples can be found in the [examples](examples/) folder. -#### Running inside a dev container using VS Code +#### Using VS Code? -It is also possible to run the examples or contribute to the repository using a preconfigured dev container. This removes the need to install dependencies like Node.js on your local machine, and provides a consistent development environment no matter what OS you are on. - -Prerequisites on the local machine: - -- [VS Code](https://code.visualstudio.com/) + [Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack) extension -- [git](https://git-scm.com/) -- [Docker](https://www.docker.com/) - -To run the examples or start developing: - -- Open VS Code -- Click the Remote Development icon in the bottom left corner of the UI -> "Clone repository in Container Volume..." -- Paste `https://github.com/boardgameio/boardgame.io` or use your own fork (or any branch or pull request) -- The container will start up and install all required dependencies automatically -- Wait for terminal output to finish -- Open NPM Scripts panel in the sidebar and run `package.json > start` - -If your VS Code Explorer sidebar has no NPM scripts panel right-click the Explorer header and check "NPM Scripts", or just run `npm run start` yourself from a terminal. +This repository is ready to run in a dev container in VS Code. See [the contributing guidelines for details](CONTRIBUTING.md). ## Changelog From eb84d40f45305207412497e1e4b30c793d90dfa4 Mon Sep 17 00:00:00 2001 From: delucis Date: Mon, 23 Aug 2021 17:41:35 +0200 Subject: [PATCH 5/5] style: Use 2 spaces instead of 4 for indentation --- .devcontainer/devcontainer.json | 50 ++++++++++++++++----------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 91381c04a..b7b907cbb 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,33 +1,33 @@ // For format details, see https://aka.ms/devcontainer.json. For config options, see the README at: // https://github.com/microsoft/vscode-dev-containers/tree/v0.191.1/containers/typescript-node { - "name": "Node.js & TypeScript", - "build": { - "dockerfile": "Dockerfile", - // Update 'VARIANT' to pick a Node version: 12, 14, 16 - "args": { - "VARIANT": "16" - } - }, + "name": "Node.js & TypeScript", + "build": { + "dockerfile": "Dockerfile", + // Update 'VARIANT' to pick a Node version: 12, 14, 16 + "args": { + "VARIANT": "16" + } + }, - // Set *default* container specific settings.json values on container create. - "settings": {}, + // Set *default* container specific settings.json values on container create. + "settings": {}, - // Add the IDs of extensions you want installed when the container is created. - "extensions": [ - "dbaeumer.vscode-eslint", - "esbenp.prettier-vscode", - "dsznajder.es7-react-js-snippets", - "eamodio.gitlens", - "github.vscode-pull-request-github" - ], + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode", + "dsznajder.es7-react-js-snippets", + "eamodio.gitlens", + "github.vscode-pull-request-github" + ], - // Use 'forwardPorts' to make a list of ports inside the container available locally. - "forwardPorts": [3000, 8000], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [3000, 8000], - // Use 'postCreateCommand' to run commands after the container is created. - "postCreateCommand": "npm ci", + // Use 'postCreateCommand' to run commands after the container is created. + "postCreateCommand": "npm ci", - // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root. - "remoteUser": "node" -} \ No newline at end of file + // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root. + "remoteUser": "node" +}