feat(devcontainer): enable dev environments in GH Codespaces and VS C…

…ode remote containers (#135)

* feat(devcontainer): enable dev environments in GH Codespaces and VS Code remote containers

* fix(devcontainer): remove device declaration that is incompatible with GH codespaces

* fix(devcontainer): declare forwarded ports for GH Codespaces

* fix(devcontainer): set up port attributes

* fix(devcontainer): use integer port numbers

* fix(devcontainer): ensure ports are only declared once

* fix(devcontainer): ensure the node_modules are owned by node at create

* clone a sample repo with icons

* clone sample repos to home folder

* clone to home/node

Co-authored-by: MrRobz <robinphilipthomas@outlook.in>

.devcontainer/Dockerfile

@@ -0,0 +1,26 @@
+# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
+ARG VARIANT=16-bullseye
+FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
+
+RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+  && apt-get -y upgrade \
+  && apt-get -y install --no-install-recommends git nano openssl libnss3-dev chromium zsh \
+  && apt-get autoremove -y && apt-get clean -y && rm -rf /var/lib/apt/lists/* /root/.gnupg /tmp/library-scripts
+
+RUN chsh -s $(which zsh) root \
+  && chsh -s $(which zsh) node
+
+# Clone a sample repos with svg icons in it
+RUN cd /home/node && git clone https://github.com/Remix-Design/RemixIcon.git
+RUN cd /home/node && git clone https://github.com/tailwindlabs/heroicons.git
+
+EXPOSE 3000
+EXPOSE 5901
+EXPOSE 6080
+
+# [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 modules
+# RUN su node -c "npm install -g <your-package-list-here>"

.devcontainer/devcontainer.json

@@ -0,0 +1,37 @@
+{
+  "name": "iconshelf",
+  "dockerComposeFile": "docker-compose.yml",
+  "service": "iconshelf",
+  "workspaceFolder": "/workspace",
+  "postCreateCommand": "mkdir -p node_modules && sudo chown -R node:node node_modules && npm ci",
+  "remoteUser": "node",
+  "settings": {},
+  "extensions": [
+    "bradlc.vscode-tailwindcss",
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig",
+    "esbenp.prettier-vscode"
+  ],
+  "forwardPorts": [3000, 5901, 6080],
+  "portsAttributes": {
+    "3000": {
+      "label": "Dev Server",
+      "onAutoForward": "notify"
+    },
+    "5091": {
+      "label": "NoVNC Internal",
+      "onAutoForward": "silent"
+    },
+    "6080": {
+      "label": "NoVNC Web",
+      "onAutoForward": "openBrowserOnce"
+    }
+  },
+  "features": {
+    "ghcr.io/devcontainers/features/desktop-lite:1": {
+      "version": "latest",
+      "webPort": 6080,
+      "vncPort": 5901
+    }
+  }
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,32 @@
+version: "2.1"
+
+services:
+  iconshelf:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        VARIANT: 16-bullseye
+
+    security_opt:
+      - seccomp:unconfined
+
+    environment:
+      - PUID=1000
+      - PGID=1000
+
+    working_dir: /workspace
+
+    volumes:
+      - ..:/workspace:cached
+      - iconshelf_node_modules:/workspace/node_modules
+
+    shm_size: "1gb" # provide min required memory for electron not to crash
+
+    # Overrides default command so things don't shut down after the process ends.
+    command: /bin/sh -c "while sleep 1000; do :; done"
+
+    user: node
+
+volumes:
+  iconshelf_node_modules:

contributing.md

@@ -17,6 +17,8 @@ _It can't be understated how frustrating and draining it can be to maintainers t
 
 ## Repo Setup
 
+> _Note_ that this repository is compatible with GitHub Codespaces as well as VS Code Remote Containers. Opening your cloned project with either of these options will perform these dev setup steps for you automatically! [demo](https://vimeo.com/757666222)
+
 The package manager used to install and link dependencies must be npm v7 or later.
 
 > Make sure you have Node version 16.x installed!